Google Charts 색 변경하기

 

어느 날, 원형차트 색 변경할 일이 생겼다.

 

구글 차트에서 다 알려주는 색변경!

 

 

구성 옵션

이름

backgroundColor	차트의 기본 영역 배경색입니다. 단순 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이거나 다음 속성이 있는 객체일 수 있습니다. 유형: 문자열 또는 객체 기본값: 'white'
배경 색상.획	차트 테두리의 색상으로, HTML 색상 문자열입니다. 유형: 문자열 기본값: '#666'
배경 색상.획 너비	테두리 너비(픽셀)입니다. 유형: 숫자 기본값: 0
배경 색상.채우기	차트 채우기 색상이 HTML 색상 문자열로 표시됩니다. 유형: 문자열 기본값: 'white'
차트 영역	차트 영역의 위치와 크기를 구성하기 위한 구성원이 있는 객체입니다 (축과 범례를 제외하고 차트 자체가 그려짐). 숫자 또는 숫자 다음에 %가 오는 두 가지 형식이 지원됩니다. 간단한 숫자는 픽셀 단위 값, 숫자 다음에 % 가 백분율로 표시됩니다. 예: chartArea:{left:20,top:0,width:'50%',height:'75%'} 유형: 객체 기본값: null
차트 영역 배경 색상	차트 영역 배경 색상입니다. 문자열은 16진수 문자열(예: '#fdc') 또는 영어 색상 이름이어야 합니다. 객체가 사용될 때 다음 속성을 제공할 수 있습니다. stroke: 16진수 문자열 또는 영어 색상 이름으로 제공되는 색상입니다. strokeWidth: 제공되는 경우 지정된 너비의 차트 영역 주위에 테두리를 그립니다 (stroke의 색상도 사용). 유형: 문자열 또는 객체 기본값: 'white'
차트 영역	왼쪽 테두리에서 차트를 그리는 거리 유형: 숫자 또는 문자열 기본값: 자동
차트 영역.top	위쪽 테두리에서 차트를 그리는 거리 유형: 숫자 또는 문자열 기본값: 자동
차트 영역 너비	차트 영역 너비 유형: 숫자 또는 문자열 기본값: 자동
차트 영역	차트 영역 높이를 나타냅니다. 유형: 숫자 또는 문자열 기본값: 자동
색상	차트 요소에 사용할 색상입니다. 문자열 배열입니다. 여기서 각 요소는 HTML 색상 문자열입니다(예: colors:['red','#004411']). 유형: 문자열 배열 기본값: 기본 색상
enableInteractivity	차트에서 사용자 기반 이벤트를 발생시키는지 또는 사용자 상호작용에 반응하는지 여부 false인 경우 차트에서 '선택' 또는 다른 상호작용 기반 이벤트가 발생하지는 않지만 (준비 또는 오류 이벤트는 발생함) 마우스 오버 텍스트가 표시되거나 사용자 입력에 따라 변경되지 않습니다. 유형: 부울 기본값: true
fontSize	차트에 있는 모든 텍스트의 기본 글꼴 크기(픽셀)입니다. 특정 차트 요소의 속성을 사용하여 재정의할 수 있습니다. 유형: 숫자 기본값: 자동
글꼴 이름	차트의 모든 텍스트의 기본 글꼴입니다. 특정 차트 요소의 속성을 사용하여 재정의할 수 있습니다. 유형: 문자열 기본값: 'Arial'
강제 IFrame	인라인 프레임 내에 차트를 그립니다. IE8에서는 이 옵션이 무시되며 모든 IE8 차트는 i-frame에 그려집니다. 유형: 부울 기본값: false
높이	차트의 높이(픽셀)입니다. 유형: 숫자 기본값: 값을 포함하는 요소의 높이
is3D	true인 경우 3차원 차트를 표시합니다. 유형: 부울 기본값: false
전설	범례의 다양한 측면을 구성하는 구성원이 있는 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다.   유형: 객체 기본값: null
범례.alignment	범례의 정렬 다음 중 하나일 수 있습니다. 'start' - 범례에 할당된 영역의 시작 부분에 맞춰 정렬됩니다. 'center' - 범례에 할당된 영역을 중심으로 합니다. 'end' - 범례에 할당된 영역의 끝 부분에 맞춰 정렬됩니다. 시작, 가운데, 끝은 범례의 스타일(세로 또는 가로)을 기준으로 합니다. 예를 들어 '오른쪽' 범례에서 '시작'과 '종료'는 각각 상단과 하단에 있고, '상단' 범례의 경우 '시작'과 '종료'는 영역의 왼쪽과 오른쪽에 있습니다. 기본값은 범례의 위치에 따라 다릅니다. '하단' 범례의 기본값은 '가운데'이고 다른 범례의 기본값은 '시작'입니다. 유형: 문자열 기본값: 자동
범례.position	범례의 위치입니다. 다음 중 하나일 수 있습니다. '하단' - 차트 아래에 범례를 표시합니다. 'labeled' - 슬라이스를 데이터 값에 연결하는 선을 그립니다. 'left' - 차트의 왼쪽 범례를 표시합니다. 'none' - 범례를 표시하지 않습니다. 'right' - 차트의 오른쪽 범례를 표시합니다. 'top' - 차트 위에 범례를 표시합니다. 유형: 문자열 기본값: '오른쪽'
범례.maxLines	범례의 최대 행 수입니다. 범례에 선을 추가하려면 이 값을 1보다 큰 수로 설정하세요. 참고: 렌더링된 실제 선 수를 결정하는 데 사용되는 정확한 로직은 여전히 유동적입니다. 이 옵션은 현재 범례가 '위'에 있는 경우에만 작동합니다. 유형: 숫자 기본값: 1
범례.textStyle	범례 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.   color는 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이 될 수 있습니다. fontName 및 fontSize도 참고하세요. 유형: 객체 기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
파이 홀	0에서 1 사이의 값인 경우 도넛 차트를 표시합니다. 구멍 반지름이 차트 반경의 number와 같게 됩니다. 유형: 숫자 기본값: 0
원형 원형 슬라이스 테두리 색상	슬라이스 테두리의 색상입니다. 차트가 2차원인 경우에만 적용됩니다. 유형: 문자열 기본값: 'white'
파이 슬라이스 텍스트	슬라이스에 표시되는 텍스트 콘텐츠입니다. 다음 중 하나일 수 있습니다. 'percentage' - 전체 크기 대비 슬라이스 크기의 비율입니다. 'value' - slice의 양적 값 'label' - 슬라이스의 이름입니다. 'none' - 텍스트가 표시되지 않습니다. 유형: 문자열 기본값: 'percentage'
파이 슬라이스 텍스트 스타일	슬라이스 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.   color는 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이 될 수 있습니다. fontName 및 fontSize도 참고하세요. 유형: 객체 기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
파이 시작각	차트를 회전할 각도입니다. 기본값인 0를 사용하면 첫 번째 슬라이스의 가장 왼쪽 가장자리가 바로 위쪽을 향합니다. 유형: 숫자 기본값: 0
역카테고리	true인 경우 슬라이스를 시계 반대 방향으로 그립니다. 기본값은 시계 방향으로 그리는 것입니다. 유형: 부울 기본값: false
파이 레지듀스 슬라이스 색상	sliceVisibilityThreshold 아래의 모든 슬라이스를 포함하는 조합 슬라이스의 색상입니다. 유형: 문자열 기본값: '#ccc'
pieResidueSliceLabel	sliceVisibilityThreshold 아래의 모든 슬라이스를 포함하는 조합 슬라이스의 라벨입니다. 유형: 문자열 기본값: '기타'
슬라이스	객체의 배열로, 각각은 원형에서 해당하는 슬라이스의 형식을 설명합니다. 슬라이스의 기본값을 사용하려면 빈 객체 (예: {}). 슬라이스 또는 값이 지정되지 않은 경우 전역 값이 사용됩니다. 각 객체는 다음 속성을 지원합니다. color - 이 슬라이스에 사용할 색상입니다. 유효한 HTML 색상 문자열을 지정하세요. offset - 슬라이스를 원형의 나머지 부분과 구분하는 정도이며 0.0(전혀 아님)에서 1.0 (파이의 반경)까지입니다. textStyle - 이 슬라이스의 전역 pieSliceTextStyle를 재정의합니다. 객체의 배열을 각 조각에 지정된 순서대로 적용할 수도 있고, 각 하위 항목에 적용할 슬라이스를 나타내는 숫자 키를 지정할 수도 있습니다. 예를 들어 다음 두 선언은 동일하며 첫 번째 슬라이스는 검은색으로 선언하고 네 번째 슬라이스는 빨간색으로 선언합니다.   유형: 객체 배열 또는 중첩된 객체가 있는 객체 기본값: {}
sliceVisibilityThreshold	파이의 분수 값으로, 슬라이스가 개별적으로 표시되지 않습니다. 이 임곗값을 통과하지 못한 모든 슬라이스는 단일 '기타' 슬라이스로 결합되고 크기는 모든 크기의 합계입니다. 기본적으로 0.5도보다 작은 슬라이스는 개별적으로 표시되지 않습니다.   유형: 숫자 기본값: 0.5/360, 1/720 또는 .0014
title	차트 위에 표시할 텍스트입니다. 유형: 문자열 기본값: 제목 없음
제목 텍스트 스타일	제목 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.   color는 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이 될 수 있습니다. fontName 및 fontSize도 참고하세요. 유형: 객체 기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
도움말	다양한 도움말 요소를 구성하기 위한 구성원이 있는 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다.   유형: 객체 기본값: null
tooltip.ignoreBounds	true로 설정하면 모든 면에 차트의 경계를 벗어나는 도움말 그리기가 허용됩니다. 참고: 이 내용은 HTML 도움말에만 적용됩니다. SVG 도움말에 따라 사용 설정하면 차트 경계 외부의 모든 오버플로가 잘립니다. 자세한 내용은 도움말 콘텐츠 맞춤설정을 참조하세요. 유형: 부울 기본값: false
tooltip.isHtml	true로 설정하면 SVG 렌더링이 아닌 HTML 렌더링 도움말을 사용합니다. 자세한 내용은 도움말 콘텐츠 맞춤설정을 참조하세요. 참고: 도움말 열 데이터 역할을 통한 HTML 도움말 콘텐츠 맞춤설정은 풍선형 차트 시각화에서 지원되지 않습니다. 유형: 부울 기본값: false
tooltip.showColorCode	true인 경우 도움말에서 슬라이스 정보 옆에 색상이 있는 정사각형을 표시합니다. 유형: 부울 기본값: false
tooltip.text	사용자가 파이 슬라이스에 마우스를 가져가면 표시할 정보 지원되는 값은 다음과 같습니다. '둘 다' - [기본값] 슬라이스의 절댓값과 전체 슬라이스의 비율을 모두 표시합니다. 'value' - 슬라이스의 절댓값만 표시합니다. 'percentage' - 슬라이스로 표시된 전체 백분율만 표시합니다. 유형: 문자열 기본값: '둘 다'
tooltip.textStyle	도움말 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.   color는 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이 될 수 있습니다. fontName 및 fontSize도 참고하세요. 유형: 객체 기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger	도움말을 표시하는 사용자 상호작용: 'focus' - 사용자가 요소 위로 마우스를 가져가면 도움말이 표시됩니다. 'none' - 도움말이 표시되지 않습니다. '선택' - 사용자가 요소를 선택하면 도움말이 표시됩니다. 유형: 문자열 기본값: '포커스'
너비	차트의 너비(픽셀)입니다. 유형: 숫자 기본값: 포함하는 요소의 너비

 

 

 

 

 

 

더 많고 자세한 내용은  ⬇⬇⬇

https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=ko#options 

시각화: 원형 차트  |  Charts  |  Google Developers