Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 성수직장인
- 오브젝트
- 직장인점심
- DesignPattern
- 헤드퍼스트
- 헤드퍼스트디자인패턴
- 독서일지
- JavaScript
- 책읽기
- 성수
- 객체지향
- 깨끗한코드
- 성수볼거리
- 성수핫플
- 객체지향프로그래밍
- Java
- Linux
- 직장인
- 코딩
- 클린코드
- IntelliJ
- 성수맛집
- 주니어개발자
- 디자인패턴
- 개발자
- 독서
- JAVA개발자
- docker
- 상속
- 책너두
Archives
- Today
- Total
닭발개발
Google Charts 색 변경하기 본문
728x90
어느 날, 원형차트 색 변경할 일이 생겼다.
구글 차트에서 다 알려주는 색변경!
구성 옵션
이름
backgroundColor | 차트의 기본 영역 배경색입니다. 단순 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이거나 다음 속성이 있는 객체일 수 있습니다. 유형: 문자열 또는 객체
기본값: 'white'
|
배경 색상.획 | 차트 테두리의 색상으로, HTML 색상 문자열입니다. 유형: 문자열
기본값: '#666'
|
배경 색상.획 너비 | 테두리 너비(픽셀)입니다. 유형: 숫자
기본값: 0
|
배경 색상.채우기 | 차트 채우기 색상이 HTML 색상 문자열로 표시됩니다. 유형: 문자열
기본값: 'white'
|
차트 영역 | 차트 영역의 위치와 크기를 구성하기 위한 구성원이 있는 객체입니다 (축과 범례를 제외하고 차트 자체가 그려짐). 숫자 또는 숫자 다음에 %가 오는 두 가지 형식이 지원됩니다. 간단한 숫자는 픽셀 단위 값, 숫자 다음에 % 가 백분율로 표시됩니다. 예: chartArea:{left:20,top:0,width:'50%',height:'75%'} 유형: 객체
기본값: null
|
차트 영역 배경 색상 |
차트 영역 배경 색상입니다. 문자열은 16진수 문자열(예: '#fdc') 또는 영어 색상 이름이어야 합니다. 객체가 사용될 때 다음 속성을 제공할 수 있습니다.
유형: 문자열 또는 객체
기본값: 'white'
|
차트 영역 | 왼쪽 테두리에서 차트를 그리는 거리 유형: 숫자 또는 문자열
기본값: 자동
|
차트 영역.top | 위쪽 테두리에서 차트를 그리는 거리 유형: 숫자 또는 문자열
기본값: 자동
|
차트 영역 너비 | 차트 영역 너비 유형: 숫자 또는 문자열
기본값: 자동
|
차트 영역 | 차트 영역 높이를 나타냅니다. 유형: 숫자 또는 문자열
기본값: 자동
|
색상 | 차트 요소에 사용할 색상입니다. 문자열 배열입니다. 여기서 각 요소는 HTML 색상 문자열입니다(예: colors:['red','#004411']). 유형: 문자열 배열
기본값: 기본 색상
|
enableInteractivity | 차트에서 사용자 기반 이벤트를 발생시키는지 또는 사용자 상호작용에 반응하는지 여부 false인 경우 차트에서 '선택' 또는 다른 상호작용 기반 이벤트가 발생하지는 않지만 (준비 또는 오류 이벤트는 발생함) 마우스 오버 텍스트가 표시되거나 사용자 입력에 따라 변경되지 않습니다. 유형: 부울
기본값: true
|
fontSize | 차트에 있는 모든 텍스트의 기본 글꼴 크기(픽셀)입니다. 특정 차트 요소의 속성을 사용하여 재정의할 수 있습니다. 유형: 숫자
기본값: 자동
|
글꼴 이름 | 차트의 모든 텍스트의 기본 글꼴입니다. 특정 차트 요소의 속성을 사용하여 재정의할 수 있습니다. 유형: 문자열
기본값: 'Arial'
|
강제 IFrame | 인라인 프레임 내에 차트를 그립니다. IE8에서는 이 옵션이 무시되며 모든 IE8 차트는 i-frame에 그려집니다. 유형: 부울
기본값: false
|
높이 | 차트의 높이(픽셀)입니다. 유형: 숫자
기본값: 값을 포함하는 요소의 높이
|
is3D | true인 경우 3차원 차트를 표시합니다. 유형: 부울
기본값: false
|
전설 | 범례의 다양한 측면을 구성하는 구성원이 있는 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 유형: 객체
기본값: null
|
범례.alignment | 범례의 정렬 다음 중 하나일 수 있습니다.
기본값은 범례의 위치에 따라 다릅니다. '하단' 범례의 기본값은 '가운데'이고 다른 범례의 기본값은 '시작'입니다. 유형: 문자열
기본값: 자동
|
범례.position | 범례의 위치입니다. 다음 중 하나일 수 있습니다.
유형: 문자열
기본값: '오른쪽'
|
범례.maxLines | 범례의 최대 행 수입니다. 범례에 선을 추가하려면 이 값을 1보다 큰 수로 설정하세요. 참고: 렌더링된 실제 선 수를 결정하는 데 사용되는 정확한 로직은 여전히 유동적입니다. 이 옵션은 현재 범례가 '위'에 있는 경우에만 작동합니다. 유형: 숫자
기본값: 1
|
범례.textStyle | 범례 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. 유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
파이 홀 | 0에서 1 사이의 값인 경우 도넛 차트를 표시합니다. 구멍 반지름이 차트 반경의 number와 같게 됩니다. 유형: 숫자
기본값: 0
|
원형 원형 슬라이스 테두리 색상 | 슬라이스 테두리의 색상입니다. 차트가 2차원인 경우에만 적용됩니다. 유형: 문자열
기본값: 'white'
|
파이 슬라이스 텍스트 | 슬라이스에 표시되는 텍스트 콘텐츠입니다. 다음 중 하나일 수 있습니다.
유형: 문자열
기본값: 'percentage'
|
파이 슬라이스 텍스트 스타일 | 슬라이스 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. 유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
파이 시작각 | 차트를 회전할 각도입니다. 기본값인 0를 사용하면 첫 번째 슬라이스의 가장 왼쪽 가장자리가 바로 위쪽을 향합니다. 유형: 숫자
기본값: 0
|
역카테고리 | true인 경우 슬라이스를 시계 반대 방향으로 그립니다. 기본값은 시계 방향으로 그리는 것입니다. 유형: 부울
기본값: false
|
파이 레지듀스 슬라이스 색상 | sliceVisibilityThreshold 아래의 모든 슬라이스를 포함하는 조합 슬라이스의 색상입니다. 유형: 문자열
기본값: '#ccc'
|
pieResidueSliceLabel | sliceVisibilityThreshold 아래의 모든 슬라이스를 포함하는 조합 슬라이스의 라벨입니다. 유형: 문자열
기본값: '기타'
|
슬라이스 | 객체의 배열로, 각각은 원형에서 해당하는 슬라이스의 형식을 설명합니다. 슬라이스의 기본값을 사용하려면 빈 객체 (예: {}). 슬라이스 또는 값이 지정되지 않은 경우 전역 값이 사용됩니다. 각 객체는 다음 속성을 지원합니다.
유형: 객체 배열 또는 중첩된 객체가 있는 객체
기본값: {}
|
sliceVisibilityThreshold | 파이의 분수 값으로, 슬라이스가 개별적으로 표시되지 않습니다. 이 임곗값을 통과하지 못한 모든 슬라이스는 단일 '기타' 슬라이스로 결합되고 크기는 모든 크기의 합계입니다. 기본적으로 0.5도보다 작은 슬라이스는 개별적으로 표시되지 않습니다. 유형: 숫자
기본값: 0.5/360, 1/720 또는 .0014
|
title | 차트 위에 표시할 텍스트입니다. 유형: 문자열
기본값: 제목 없음
|
제목 텍스트 스타일 | 제목 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. 유형: 객체
기본값: {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 | 사용자가 파이 슬라이스에 마우스를 가져가면 표시할 정보 지원되는 값은 다음과 같습니다.
유형: 문자열
기본값: '둘 다'
|
tooltip.textStyle | 도움말 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. 유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger | 도움말을 표시하는 사용자 상호작용:
유형: 문자열
기본값: '포커스'
|
너비 | 차트의 너비(픽셀)입니다. 유형: 숫자
기본값: 포함하는 요소의 너비
|
더 많고 자세한 내용은 ⬇⬇⬇
https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=ko#options
728x90
반응형
'알아두면 쓸모있는 것들' 카테고리의 다른 글
window port 종료하기, port kill 하는 법 (4) | 2023.04.12 |
---|---|
[intelliJ] 글자크기 설정하기 (2) | 2023.04.11 |
개발자 도구(DevTools) 1000% 활용하기 (4) | 2023.03.17 |
티스토리에서 아이폰 emoji 사용하기 (2) | 2023.03.07 |
[intelliJ] 인코딩 설정하기, 한글설정, UTF-8 설정 (0) | 2023.03.07 |