개요
주석 차트는 주석을 지원하는 대화형 시계열 선 차트입니다. 이제 주석 처리된 타임라인에 주석 차트가 자동으로 사용됩니다.
혼동 알림: 현재 Google 주석 차트는 현재 다른 Google 차트 (현재 영역, 막대, 열, 콤보, 선, 분산형)에서 지원하는 주석과 다릅니다. 이러한 차트에서 주석은 별도의 데이터 표 열에 지정되며 사용자가 마우스를 가져가면 전체 주석 텍스트를 볼 수 있는 짧은 텍스트로 표시됩니다. 반면에 주석 차트는 아래와 같이 오른쪽에 전체 주석을 표시합니다.
예
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type='text/javascript'> google.charts.load('current', {'packages':['annotationchart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Kepler-22b mission'); data.addColumn('string', 'Kepler title'); data.addColumn('string', 'Kepler text'); data.addColumn('number', 'Gliese 163 mission'); data.addColumn('string', 'Gliese title'); data.addColumn('string', 'Gliese text'); data.addRows([ [new Date(2314, 2, 15), 12400, undefined, undefined, 10645, undefined, undefined], [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter', 12374, undefined, undefined], [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall', 15766, 'Gallantors', 'First Encounter'], [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!', 34334, 'Gallantors', 'Statement of shared principles'], [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties', 66467, 'Gallantors', 'Mysteries revealed'], [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost', 79463, 'Gallantors', 'Omniscience achieved'] ]); var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div')); var options = { displayAnnotations: true }; chart.draw(data, options); } </script> </head> <body> <div id='chart_div' style='width: 900px; height: 600px;'></div> </body> </html>
로드 중
google.charts.load
패키지 이름은 "annotationchart"
입니다.
google.charts.load("current", {packages: ['annotationchart']});
시각화의 클래스 이름은 google.visualization.AnnotationChart
입니다.
var visualization = new google.visualization.AnnotationChart(container);
데이터 형식
차트에 한 개 이상의 선을 표시할 수 있습니다. 각 행은 차트의 X 위치, 즉 특정 시간을 나타냅니다. 각 선은 1~3개의 열로 구성됩니다.
- 첫 번째 열은
date
또는datetime
유형이며 차트에서 포인트의 X 값을 지정합니다. 이 열이datetime
가 아닌date
유형인 경우 X축의 가장 짧은 해결 시간은 1일입니다. - 그런 다음 여기에 설명된 대로 각 데이터 줄을 1~3개의 추가 열 집합으로 설명합니다.
- Y 값 - [필수, 숫자] 각 세트의 첫 번째 열은 첫 번째 열에서 상응하는 시간에 줄의 값을 설명합니다. 열 라벨이 차트에 선의 제목으로 표시됩니다.
- 주석 제목 - [선택사항, 문자열] 문자열 열이 값 열을 따르고
displayAnnotations
옵션이 true인 경우 이 열에는 이 지점을 설명하는 짧은 제목이 포함됩니다. 예를 들어 이 선이 브라질의 온도를 나타내고 이 점이 매우 높으면 제목은 '기록상 가장 뜨거운 날'이 될 수 있습니다. - 주석 텍스트 - [선택적인 문자열] 이 시리즈에 두 번째 문자열 열이 있으면 셀 값은 이 지점의 추가 설명 텍스트로 사용됩니다. 이 열을 사용하려면
displayAnnotations
옵션을 true로 설정해야 합니다.allowHtml
를true
로 설정한 경우 HTML 태그를 사용할 수 있습니다. 크기 제한은 없지만, 너무 긴 항목은 표시 섹션을 오버플로할 수 있습니다. 이 부분에 주석 제목 열이 있더라도 이 열이 없어도 됩니다. 열 라벨은 차트에서 사용되지 않습니다. 예를 들어 이 날 기록상 가장 더웠던 날이라면 "다음 날 가장 가까운 날은 10도 더 추웠어요!"와 같이 말할 수 있습니다.
구성 옵션
이름 | |
---|---|
allowHtml |
true로 설정하면 HTML 태그가 포함된 주석 텍스트가 HTML로 렌더링됩니다. 유형: 부울
기본값: false
|
모든값 서픽스 |
세로 축의 범례 및 눈금 라벨에 있는 모든 값에 추가할 접미사입니다. 유형: 문자열
기본값: 없음
|
annotationWidth |
전체 차트 영역에서 주석 영역의 너비 (백분율)입니다. 5~80 사이의 숫자여야 합니다. 유형: 숫자
기본값: 25
|
색상 |
차트 선 및 라벨에 사용할 색상입니다. 문자열 배열입니다. 각 요소는 유효한 HTML 색상 형식의 문자열입니다. 예: '빨간색' 또는 '#00cc00' 유형: 문자열 배열
기본값: 기본 색상
|
날짜 형식 |
오른쪽 상단에 날짜 정보를 표시하는 데 사용되는 형식입니다. 이 필드의 형식은 java SimpleDateFormat 클래스로 지정된 대로입니다. 유형: 문자열
기본값: 첫 번째 열 유형(각각 날짜 또는 날짜/시간)에 따라 'MMMM dd, yyyy' 또는 'HH:mm MMMM dd, yyyy'입니다.
|
displayAnnotations |
false로 설정하면 차트에서 주석 테이블이 숨겨지고 주석 및 annotationText가 표시되지 않습니다. 이 옵션에 관계없이 데이터에 주석이 없으면 주석 테이블이 표시되지 않습니다. 이 옵션을 true로 설정하면 모든 숫자 열 뒤에 주석 제목 열과 주석 텍스트에 각각 하나씩 2개의 선택적 주석 문자열 열을 추가할 수 있습니다. 유형: 부울
기본값: true
|
displayAnnotations 필터 |
true로 설정하면 차트에 필터 필터가 표시되어 주석을 필터링합니다. 주석이 많을 때 이 옵션을 사용하세요. 유형: 부울
기본값: false
|
displayDateBarSeparator 클래스의 생성자 |
시리즈 값과 범례의 날짜 사이에 작은 막대 구분자 ( | )를 표시할지 나타냅니다. true는 yes입니다. 유형: 부울
기본값: true
|
displayExactValues |
공간을 절약하기 위해 그래프 상단에 짧은 버전의 둥근 값을 표시할지 여부입니다. false는 가능할 수 있음을 나타냅니다. 예를 들어 false로 설정하면 56123.45가 56.12k로 표시될 수 있습니다. 유형: 부울
기본값: false
|
displayLegendDots |
범례 텍스트의 값 옆에 점을 표시할지 여부를 나타냅니다. 여기서 true는 '예'를 의미합니다. 유형: 부울
기본값: true
|
displayLegendValues |
범례에 강조표시된 값을 표시할지 여부입니다. 여기서 true는 예입니다. 유형: 부울
기본값: true
|
displayRangeSelector |
확대/축소 범위 선택 영역 (차트 하단의 영역)을 표시할지 여부입니다. 여기서 false는 '아니요'입니다. 확대/축소 선택기의 윤곽선은 차트의 첫 번째 계열에 대한 로그 배율 버전으로, 확대/축소 선택기 높이에 맞게 조정됩니다. 유형: 부울
기본값: true
|
displayZoomButtons |
확대/축소 버튼 표시 여부('1d 5d 1m' 등). 여기서 false는 아니요를 의미합니다. 유형: 부울
기본값: true
|
fill |
선 그래프의 각 선 아래에 채우기 알파를 지정하는 0~100 (포함) 사이의 숫자입니다. 100은 100% 불투명을 의미하고 0은 채우기를 전혀 사용하지 않음을 의미합니다. 채우기 색상은 그 위의 선과 동일한 색상입니다. 유형: 숫자
기본값: 0
|
범례 위치 |
색상 범례를 확대/축소 버튼과 날짜가 있는 동일한 행('sameRow') 또는 새 행('newRow')에 배치할지 여부입니다. 유형: 문자열
기본값: 'sameRow'
|
max |
Y축에 표시되는 최댓값입니다. 최대 데이터 포인트가 이 값을 초과하면 이 설정이 무시되고 차트가 최대 데이터 포인트 위에 다음 주요 눈금 표시를 표시하도록 조정됩니다. 이는 핵심 차트의 유형: 숫자
기본값: 자동
|
min |
Y축에 표시되는 최솟값입니다. 최소 데이터 포인트가 이 값보다 작으면 이 설정이 무시되고 차트가 조정되어 최소 데이터 포인트 아래의 다음 주요 눈금 표시를 표시합니다. 이는 핵심 차트의 유형: 숫자
기본값: 자동
|
숫자 형식 |
그래프 상단에서 값의 형식을 지정하는 데 사용할 숫자 형식 패턴을 지정합니다. 패턴은 자바 DecimalFormat 클래스로 지정된 형식이어야 합니다.
이 옵션을 지정하면 유형: 문자열 또는 숫자:문자열 쌍의 맵
기본값: 자동
|
scaleColumn |
그래프에서 Y축 눈금 표시에 표시할 값을 지정합니다. 기본값은 오른쪽에 단일 축척이 지정되는 것으로, 두 계열에 모두 적용되지만 그래프의 여러 면을 여러 계열 값에 맞게 조정할 수 있습니다. 이 옵션은 축척 값으로 사용할 계열의 색인 (0부터 시작)을 지정하는 0~3자리 숫자 배열을 사용합니다. 이러한 값이 표시되는 위치는 배열에 포함된 값의 수에 따라 다릅니다.
배율을 두 개 이상 표시할 때는 유형: 숫자의 배열
기본값: 자동
|
배율 형식 |
축 눈금 라벨에 사용할 숫자 형식입니다. 기본값 유형: 문자열
기본값: '#'
|
배율 유형 |
Y축에 표시되는 최댓값과 최솟값을 설정합니다. 사용할 수 있는 옵션은 다음과 같습니다.
최솟값 또는 최댓값을 지정하면 배율 유형에 따라 결정되는 최솟값과 최댓값보다 우선 적용됩니다. 유형: 문자열
기본값: '고정'
|
테이블 |
주석 테이블과 관련된 옵션이 포함되어 있습니다. 이 객체의 속성을 지정하려면 객체 리터럴 표기법을 사용하면 됩니다. var options: { table: { sortAscending: true, sortColumn: 1 } }; 유형: 객체
기본값: null
|
table.sortAscending |
유형: 부울
기본값: false
|
table.sortColumn |
주석이 정렬되는 주석 테이블의 열 색인입니다. 색인은 0(주석 라벨 열) 또는 1(주석 텍스트 열)이어야 합니다. 유형: 숫자
기본값: 0
|
두께 |
선의 두께를 지정하는 0에서 10까지의 숫자입니다. 여기서 0은 가장 얇은 것입니다. 유형: 숫자
기본값: 0
|
확대/축소 종료 시간 |
선택한 확대/축소 범위의 종료일/시간을 설정합니다. 유형: 날짜
기본값: 없음
|
ZoomStartTime |
선택한 확대/축소 범위의 시작 날짜/시간을 설정합니다. 유형: 날짜
기본값: 없음
|
방법
메서드 | |
---|---|
clearChart() |
차트를 삭제하고 할당된 모든 리소스를 해제합니다. 반환 유형: 없음
|
draw(data, options, state) |
차트를 그립니다. 반환 유형: 없음
|
getContainer() |
주석 차트가 포함된 컨테이너 요소의 핸들을 검색합니다. 반환 유형: DOM 요소 처리
|
getSelection() |
표준 반환 유형: 선택 요소의 배열
|
getVisibleChartRange() |
반환 유형:
start 및 end 속성이 있는 객체
|
hideDataColumns(columnIndexes) |
지정된 데이터 계열을 차트에서 숨깁니다. 숫자 또는 숫자의 배열이 될 수 있는 하나의 매개변수를 허용합니다. 여기서 0은 첫 번째 데이터 계열을 참조합니다. 반환 유형: 없음
|
setVisibleChartRange(start, end) |
표시 범위 (확대/축소)를 지정된 범위로 설정합니다. 원하는 공개 상태 범위의 처음 시간과 마지막 시간을 나타내는 반환 유형: 없음
|
showDataColumns(columnIndexes) |
반환 유형: 없음
|
이벤트
이름 | |
---|---|
rangechange |
사용자가 범위 슬라이더를 변경하면 발생합니다. 새 범위 엔드포인트는 google.visualization.events.addListener(chart, 'rangechange', rangechange_handler); function rangechange_handler(e) { console.log('You changed the range to ', e['start'], ' and ', e['end']); } 속성: start, end
|
ready |
차트에서 외부 메서드 호출을 사용할 수 있습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 속성: 없음
|
select |
사용자가 시각적 항목을 클릭하면 시작됩니다. 어떤 항목이 선택되었는지 알아보려면 속성: 없음
|
데이터 정책
모든 코드와 데이터가 브라우저에서 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.