개요
선택적 주석이 있는 대화형 시계열 선 차트입니다.
주석 처리된 타임라인에서 이제 자동으로 주석 차트를 사용합니다.
예
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages':['annotatedtimeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sold Pencils');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Sold Pens');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addRows([
[new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
[new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
[new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
[new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
[new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
[new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
</script>
</head>
<body>
// Note how you must specify the size of the container element explicitly!
<div id='chart_div' style='width: 700px; height: 240px;'></div>
</body>
</html>
중요: 이 시각화를 사용하려면 페이지에서 컨테이너 요소의 높이와 너비를 명시적으로 지정해야 합니다. 예를 들면 <div id="chart_div"
style="width:400; height:250"></div>입니다.
로드
google.charts.load 패키지 이름은 "annotatedtimeline"입니다.
google.charts.load("current", {packages: ['annotatedtimeline']});
시각화의 클래스 이름은 google.visualization.AnnotatedTimeLine입니다.
var visualization = new google.visualization.AnnotatedTimeLine(container);
데이터 형식
차트에 하나 이상의 선을 표시할 수 있습니다. 각 행은 차트에서 X 위치, 즉 특정 시간을 나타냅니다. 각 줄은 1~3개의 열 집합으로 설명됩니다.
- 첫 번째 열은
date또는datetime유형이며 차트에서 포인트의 X 값을 지정합니다. 이 열이datetime가 아닌date유형인 경우 X축에서 가장 짧은 시간 확인은 1일입니다. - 각 데이터 라인은 여기에 설명된 1~3개의 추가 열 집합으로 설명됩니다.
- Y 값 - [필수, 숫자] 각 세트의 첫 번째 열은 첫 번째 열부터 상응하는 시간에 있는 줄의 값을 설명합니다. 열 라벨은 차트에 해당 선의 제목으로 표시됩니다.
- 주석 제목 - [선택, 문자열] 문자열 열이 값 열 뒤에 있고
displayAnnotations옵션이 true인 경우, 이 열에는 이 점을 설명하는 짧은 제목이 있습니다. 예를 들어 이 선이 브라질의 기온을 나타내고 이 지점이 매우 높은 숫자라면 제목은 '기록에서 가장 더운 날'이 될 수 있습니다. - 주석 텍스트 - [선택적 문자열] 이 계열에 두 번째 문자열 열이 있는 경우 셀 값이 이 요소의 추가 설명 텍스트로 사용됩니다. 이 열을 사용하려면
displayAnnotations옵션을 true로 설정해야 합니다.allowHtml를true로 설정하면 HTML 태그를 사용할 수 있습니다. 기본적으로 크기 제한은 없지만 너무 긴 항목은 표시 섹션을 오버플로할 수 있습니다. 이 시점에 주석 제목 열이 있더라도 이 열이 필요하지 않습니다. 열 라벨은 차트에서 사용되지 않습니다. 예를 들어 오늘이 기록상 가장 더운 날이었다면 "다음으로 가장 가까운 날은 기온이 10도 더 낮았습니다!"와 같이 말할 수 있습니다.
구성 옵션
| 이름 | 유형 | 기본값 | 설명 |
|---|---|---|---|
| allowHtml | boolean | false | true로 설정하면 HTML 태그가 포함된 주석 텍스트가 HTML로 렌더링됩니다. |
| allowRedraw | boolean | false | 이 시각화에서 두 번째 이상의
|
| allValuesSuffix | 문자열 | 없음 | 체중계 및 범례의 모든 값에 추가될 서픽스입니다. |
| annotationsWidth | 숫자 | 25 | 전체 차트 영역 중 주석 영역의 너비 (백분율)입니다. 5~80 범위의 숫자여야 합니다. |
| 색상 | 문자열 배열 | 기본 색상 | 차트 선 및 라벨에 사용할 색상입니다. 문자열의 배열입니다. 각 요소는 유효한 HTML 색상 형식의 문자열입니다. 예: '빨간색' 또는 '#00cc00' |
| dateFormat | 문자열 | 첫 번째 열의 유형 (각각 날짜 또는 날짜/시간)에 따라 'MMMM dd, yyyy' 또는 'HH:mm MMMM dd, yyyy'입니다. | 오른쪽 상단에 날짜 정보를 표시하는 데 사용되는 형식입니다. 이 필드의 형식은 java SimpleDateFormat 클래스에 의해 지정됩니다. |
| displayAnnotations | boolean | false | true로 설정하면 차트에서 선택한 값 위에 주석이 표시됩니다. 이 옵션을 true로 설정하면 모든 숫자 열 뒤에 선택적 주석 문자열 열 두 개를 추가할 수 있습니다. 하나는 주석 제목과 주석 텍스트에 사용할 수 있습니다. |
| displayAnnotationsFilter | boolean | false | true로 설정하면 차트에 주석을 필터링하는 필터 컨트롤이 표시됩니다. 주석이 여러 개인 경우 이 옵션을 사용합니다. |
| displayDateBarSeparator | boolean | true | 계열 값과 범례의 날짜 사이에 작은 막대 구분자 ( | )를 표시할지 여부입니다. 여기서 true는 '예'를 의미합니다. |
| displayExactValues | boolean | false | 공간을 절약하기 위해 그래프 상단에 축약되고 둥근 버전의 값을 표시할지 여부입니다. false는 표시할 수 있음을 나타냅니다. 예를 들어 false로 설정하면 56123.45가 56.12k로 표시될 수 있습니다. |
| displayLegendDots | boolean | true | 범례 텍스트의 값 옆에 점을 표시할지 여부입니다. 여기서 true는 '예'를 의미합니다. |
| displayLegendValues | boolean | true | 범례에 강조표시된 값을 표시할지 여부입니다. 여기서 true는 '예'를 의미합니다. |
| displayRangeSelector | boolean | true | 확대/축소 범위 선택 영역 (차트 하단 영역)의 표시 여부입니다. 여기서 false는 아니요를 의미합니다. 확대/축소 선택기의 윤곽선은 차트에 있는 마지막 계열의 로그 배율 버전으로 확대/축소 선택기 높이에 맞게 조정됩니다. |
| displayZoomButtons | boolean | true | 확대/축소 링크 ('1d 5d 1m' 등) 표시 여부입니다. 여기서 false는 '아니요'를 의미합니다. |
| fill | 숫자 | 0 | 선 그래프에서 각 선 아래 채우기의 알파를 지정하는 0~100 사이의 숫자입니다. 100은 100% 불투명 채우기를 의미하고 0은 전혀 채우지 않음을 의미합니다. 채우기 색상은 그 위에 있는 선과 동일한 색상입니다. |
| highlightDot | 문자열 | '가장 가까운' | 계열에서 강조표시할 점 및 범례에 표시할 해당 값입니다. 다음 값 중 하나를 선택합니다.
|
| legendPosition | 문자열 | 'sameRow' | 확대/축소 버튼과 날짜 ('sameRow')가 있는 동일한 행에 색상 범례를 배치할지 또는 새 행 ('newRow')에 배치할지 여부입니다. |
| max | 숫자 | 자동 | Y축에 표시할 최댓값입니다. 최대 데이터 포인트가 이 값을 초과하면 이 설정이 무시되고 최대 데이터 포인트 위에 다음 주요 눈금 표시가 표시되도록 차트가 조정됩니다. 이는 scaleType에 의해 결정된 Y축 최댓값보다 우선 적용됩니다. |
| 분 | 숫자 | 자동 | Y축에 표시할 최솟값입니다. 최소 데이터 포인트가 이 값보다 작으면 이 설정이 무시되고 차트가 조정되어 최소 데이터 포인트 아래의 다음 주요 눈금이 표시됩니다. 이는 scaleType에 의해 결정된 Y축 최솟값보다 우선 적용됩니다. |
| numberFormats | 문자열 또는 숫자:문자열 쌍의 매핑 | 자동 | 그래프 상단의 값 형식을 지정하는 데 사용할 숫자 형식 패턴을 지정합니다. 패턴은 java DecimalFormat 클래스에서 지정한 형식이어야 합니다.
이 옵션을 지정하면 |
| scaleColumns | 숫자 배열 | 자동 | 그래프에서 Y축 눈금 표시에 표시할 값을 지정합니다. 기본값은 두 계열에 모두 적용되는 단일 척도가 오른쪽에 있는 것이지만 그래프의 여러 측면을 다른 계열 값으로 조정할 수 있습니다. 이 옵션은 배율 값으로 사용할 계열의 색인 (0부터 시작)을 지정하는 0~3개의 숫자 배열을 사용합니다. 이러한 값이 표시되는 위치는 배열에 포함된 값의 수에 따라 다릅니다.
배율을 두 개 이상 표시할 때는 |
| scaleType | 문자열 | '해결됨' | Y축에 표시되는 최댓값 및 최솟값을 설정합니다. 사용할 수 있는 옵션은 다음과 같습니다.
최솟값 또는 최댓값 옵션을 지정하면 해당 옵션이 배율 유형에 따라 결정된 최솟값 및 최댓값보다 우선합니다. |
| 두께 | 숫자 | 0 | 선의 두께를 지정하는 0~10 사이의 숫자입니다. 여기서 0이 가장 얇습니다. |
| W모드 | 문자열 | '창' | 플래시 차트의 창 모드 (wmode) 매개변수입니다. 사용 가능한 값은 '불투명', '창' 또는 '투명'입니다. |
| zoomEndTime | 날짜 | 없음 | 선택한 확대/축소 범위의 종료 날짜/시간을 설정합니다. |
| zoomStartTime | 날짜 | 없음 | 선택한 확대/축소 범위의 시작 날짜/시간을 설정합니다. |
메서드
| 메서드 | 반환 유형 | 설명 |
|---|---|---|
draw(data, options) |
없음 | 차트를 그립니다. allowRedraw 속성을 사용하여 두 번째 이후의 draw() 호출의 응답 시간을 단축할 수 있습니다. |
getSelection() |
선택 요소의 배열 | 표준 getSelection() 구현 선택된 요소는 셀 요소입니다. 사용자는 한 번에 하나의 셀만 선택할 수 있습니다. |
getVisibleChartRange() |
start 및 end 속성이 있는 객체 |
start 및 end 속성이 있는 객체를 반환합니다. 이 두 속성은 각각 현재 시간 선택을 나타내는 Date 객체입니다. |
hideDataColumns(columnIndexes) |
없음 | 지정된 데이터 계열을 차트에서 숨깁니다. 숫자 또는 숫자 배열일 수 있는 하나의 매개변수를 받습니다. 여기서 0은 첫 번째 데이터 계열을 나타내는 식입니다. |
setVisibleChartRange(start, end) |
없음 | 표시 범위 (확대/축소)를 지정된 범위로 설정합니다.
선택한 표시 범위의 첫 번째 시간과 마지막 시간을 나타내는 Date 유형의 매개변수 두 개를 사용합니다. 가장 오래된 날짜부터 end까지의
모든 항목을 포함하려면 start를 null로 설정하고, start부터 마지막 날짜까지의
모든 항목을 포함하려면 end를 null로 설정합니다. |
showDataColumns(columnIndexes) |
없음 | hideDataColumns 메서드를 사용하여 숨겨진 차트에서 지정된 데이터 계열을 표시합니다.
숫자 또는 숫자 배열일 수 있는 하나의 매개변수를 받습니다. 여기서 0은 첫 번째 데이터 계열을 나타내는 식입니다. |
이벤트
| 이름 | 설명 | 속성 |
|---|---|---|
| 범위 변경 | 확대/축소 범위가 변경되었습니다. 사용자가 표시 기간을 수정한 후이지만 setVisibleChartRange 메서드를 호출한 후에는 실행되지 않습니다.참고: 이벤트 속성을 사용하지 말고 getVisibleChartRange 메서드를 호출하여 이 속성을 가져오는 것이 좋습니다. |
|
| 준비됨 | 차트에서 외부 메서드 호출을 사용할 준비가 되었습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 draw 메서드를 호출하기 전에 이 이벤트의 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다. |
없음 |
| select | 사용자가 주석 플래그 (마커)를 클릭하면 데이터 테이블에서 해당하는 셀이 선택됩니다. 그러면 시각화에서 이 이벤트를 실행합니다. | 없음 |
참고: 브라우저에서 파일(예: 서버 (예: "http://www").
데이터 정책
브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.
참고사항
Flash 보안 설정으로 인해 웹 서버 URL(예: http://www.myhost.com/myviz.html)이 아니라 브라우저의 파일 위치(예: file:///c:/webhost/myhost/myviz.html)에서 액세스하면 이 및 모든 Flash 기반 시각화가 제대로 작동하지 않을 수 있습니다. 이 오류는 일반적으로 테스트 전용 문제입니다. Macromedia 웹사이트에 설명된 대로 이 문제를 해결할 수 있습니다.