개요
주석 차트는 주석을 지원하는 대화형 시계열 선 차트입니다. 이제 주석 처리된 타임라인이 주석 차트를 자동으로 사용합니다.
혼동 알림: 현재 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
|
| allValuesSuffix |
세로축의 범례 및 눈금 라벨의 모든 값에 추가될 접미사입니다. 유형: 문자열
기본값: 없음
|
| annotationsWidth |
전체 차트 영역 중 주석 영역의 너비 (백분율)입니다. 5~80 범위의 숫자여야 합니다. 유형: 숫자
기본값: 25
|
| 색상 |
차트 선 및 라벨에 사용할 색상입니다. 문자열의 배열입니다. 각 요소는 유효한 HTML 색상 형식의 문자열입니다. 예: '빨간색' 또는 '#00cc00' 유형: 문자열 배열
기본값: 기본 색상
|
| dateFormat |
오른쪽 상단에 날짜 정보를 표시하는 데 사용되는 형식입니다. 이 필드의 형식은 java SimpleDateFormat 클래스 유형: 문자열
기본값: 첫 번째 열의 유형(각각 날짜 또는 날짜/시간)에 따라 'MMMM dd, yyyy' 또는 'HH:mm MMMM dd, yyyy'입니다.
|
| displayAnnotations |
false로 설정하면 차트에서 주석 테이블이 숨겨지고 주석 및 annotationText가 표시되지 않습니다. 이 옵션과 관계없이 데이터에 주석이 없으면 주석 테이블도 표시되지 않습니다. 이 옵션을 true로 설정하면 모든 숫자 열 뒤에 선택적 주석 문자열 열 두 개를 추가할 수 있습니다. 하나는 주석 제목과 주석 텍스트에 사용할 수 있습니다. 유형: 불리언
기본값: true
|
| displayAnnotationsFilter |
true로 설정하면 차트에 주석을 필터링하는 필터 컨트롤이 표시됩니다. 주석이 여러 개인 경우 이 옵션을 사용합니다. 유형: 불리언
기본값: false
|
| displayDateBarSeparator |
계열 값과 범례의 날짜 사이에 작은 막대 구분자 ( | )를 표시할지 여부입니다. 여기서 true는 '예'를 의미합니다. 유형: 불리언
기본값: 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
|
| legendPosition |
확대/축소 버튼과 날짜('sameRow')가 있는 동일한 행에 색상 범례를 배치할지 또는 새 행 ('newRow')에 배치할지 여부입니다. 유형: 문자열
기본값: 'sameRow'
|
| max |
Y축에 표시할 최댓값입니다. 최대 데이터 포인트가 이 값을 초과하면
이 설정이 무시되고 최대 데이터 포인트 위에 다음 주요 눈금 표시가 표시되도록 차트가
조정됩니다. 이는 이는 핵심 차트의 유형: 숫자
기본값: 자동
|
| 분 |
Y축에 표시할 최솟값입니다. 최소 데이터 포인트가 이 값보다 작으면 이 설정이 무시되고 차트가 조정되어 최소 데이터 포인트 아래의 다음 주요 눈금 표시를 표시합니다. 이는 이는 핵심 차트의 유형: 숫자
기본값: 자동
|
| numberFormats |
그래프 상단의 값 형식을 지정하는 데 사용할 숫자 형식 패턴을 지정합니다.
이 옵션을 지정하면 유형: 문자열 또는 숫자:문자열 쌍의 매핑
기본값: 자동
|
| scaleColumns |
그래프에서 Y축 눈금 표시에 표시할 값을 지정합니다. 기본값은 두 계열에 모두 적용되는 단일 척도가 오른쪽에 있는 것이지만 그래프의 여러 면을 다른 계열 값으로 조정할 수 있습니다. 이 옵션은 배율 값으로 사용할 계열의 (0부터 시작) 색인을 지정하는 0~3개 숫자의 배열을 사용합니다. 이러한 값이 표시되는 위치는 배열에 포함된 값의 수에 따라 다릅니다.
배율을 두 개 이상 표시할 때는 유형: 숫자 배열
기본값: 자동
|
| scaleFormat |
축 눈금 라벨에 사용할 숫자 형식. 유형: 문자열
기본값: '#'
|
| scaleType |
Y축에 표시되는 최댓값 및 최솟값을 설정합니다. 사용할 수 있는 옵션은 다음과 같습니다.
최솟값 또는 최댓값 옵션을 지정하면 해당 옵션이 배율 유형에 따라 결정된 최솟값 및 최댓값보다 우선합니다. 유형: 문자열
기본값: 'fixed'
|
| 테이블 |
주석 표와 관련된 옵션을 포함합니다. 이 객체의 속성을 지정하려면 객체 리터럴 표기법을 사용하세요.
var options: {
table: {
sortAscending: true,
sortColumn: 1
}
};
유형: 객체
기본값: null
|
| table.sortAscending |
유형: 불리언
기본값: false
|
| table.sortColumn |
주석을 정렬할 주석 표의 열 색인입니다. 색인은 주석 라벨 열의 경우 0, 주석 텍스트 열의 경우 1이어야 합니다. 유형: 숫자
기본값: 0
|
| 두께 |
선의 두께를 지정하는 0~10 사이의 숫자입니다. 여기서 0이 가장 얇습니다. 유형: 숫자
기본값: 0
|
| zoomEndTime |
선택한 확대/축소 범위의 종료 날짜/시간을 설정합니다. 유형: 날짜
기본값: 없음
|
| 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 |
사용자가 시각적 항목을 클릭하면 실행됩니다. 어떤 항목이 선택되었는지 알아보려면 속성: 없음
|
데이터 정책
브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.