이 페이지는 Cloud Translation API를 통해 번역되었습니다.

주석 차트

개요
예
로드
데이터 형식
구성 옵션
메서드
이벤트
데이터 정책
참고

개요

주석 차트는 주석을 지원하는 대화형 시계열 선 차트입니다. 이제 주석 처리된 타임라인에 주석 차트가 자동으로 사용됩니다.

혼동 알림: 현재 Google 주석 차트는 현재 다른 Google 차트 (현재 영역, 막대, 열, 콤보, 선, 분산형)에서 지원하는 주석과 다릅니다. 이러한 차트에서 주석은 별도의 데이터 표 열에 지정되며 사용자가 마우스를 가져가면 전체 주석 텍스트를 볼 수 있는 짧은 텍스트로 표시됩니다. 반면에 주석 차트는 아래와 같이 오른쪽에 전체 주석을 표시합니다.

예

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);
      }

<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축에 표시되는 최댓값입니다. 최대 데이터 포인트가 이 값을 초과하면 이 설정이 무시되고 차트가 최대 데이터 포인트 위에 다음 주요 눈금 표시를 표시하도록 조정됩니다. 이는 `scaleType`에 의해 결정되는 Y축 최댓값보다 우선합니다. 핵심 차트의 `maxValue`와 유사합니다. 유형: 숫자 기본값: 자동
min	Y축에 표시되는 최솟값입니다. 최소 데이터 포인트가 이 값보다 작으면 이 설정이 무시되고 차트가 조정되어 최소 데이터 포인트 아래의 다음 주요 눈금 표시를 표시합니다. 이는 `scaleType`에 의해 결정되는 Y축 최솟값보다 우선합니다. 핵심 차트의 `minValue`와 유사합니다. 유형: 숫자 기본값: 자동
숫자 형식	그래프 상단에서 값의 형식을 지정하는 데 사용할 숫자 형식 패턴을 지정합니다. 패턴은 자바 DecimalFormat 클래스로 지정된 형식이어야 합니다. 지정하지 않으면 기본 형식 패턴이 사용됩니다. 단일 문자열 패턴이 지정되면 모든 값에 사용됩니다. 맵이 지정된 경우 키는 연속된 색인 (0부터 시작)이고 값은 지정된 계열의 형식을 지정하는 데 사용되는 패턴입니다. 차트의 모든 계열에 형식을 포함할 필요는 없습니다. 지정되지 않은 계열에는 기본 형식이 사용됩니다. 이 옵션을 지정하면 `displayExactValues` 옵션이 무시됩니다. 유형: 문자열 또는 숫자:문자열 쌍의 맵 기본값: 자동
scaleColumn	그래프에서 Y축 눈금 표시에 표시할 값을 지정합니다. 기본값은 오른쪽에 단일 축척이 지정되는 것으로, 두 계열에 모두 적용되지만 그래프의 여러 면을 여러 계열 값에 맞게 조정할 수 있습니다. 이 옵션은 축척 값으로 사용할 계열의 색인 (0부터 시작)을 지정하는 0~3자리 숫자 배열을 사용합니다. 이러한 값이 표시되는 위치는 배열에 포함된 값의 수에 따라 다릅니다. 빈 배열을 지정하면 차트에서 눈금 표시 옆에 Y 값이 표시되지 않습니다. 값을 1개 지정하면 지정된 계열의 척도가 차트의 오른쪽에만 표시됩니다. 두 개의 값을 지정하면 두 번째 계열의 척도가 차트 오른쪽에 추가됩니다. 3개의 값을 지정하면 세 번째 계열의 척도가 차트 중앙에 추가됩니다. 배열의 세 번째 값 이후의 모든 값은 무시됩니다. 배율을 두 개 이상 표시할 때는 `scaleType` 옵션을 'allfixed' 또는 'allmaximized'로 설정하는 것이 좋습니다. 유형: 숫자의 배열 기본값: 자동
배율 형식	축 눈금 라벨에 사용할 숫자 형식입니다. 기본값 `'#'`은 정수로 표시됩니다. 유형: 문자열 기본값: '#'
배율 유형	Y축에 표시되는 최댓값과 최솟값을 설정합니다. 사용할 수 있는 옵션은 다음과 같습니다. 'maximized' - Y축에서 최솟값을 계열 값의 최댓값으로 맞춥니다. 시리즈가 두 개 이상인 경우 allmaximized를 사용하세요. '고정' [기본값] - Y축은 데이터 값에 따라 다릅니다. 모든 값이 0보다 크면 Y축이 0부터 최대 데이터 값으로 확장됩니다. 모든 값이 0보다 작으면 Y축이 0부터 최소 데이터 값으로 확장됩니다. 값이 양수와 음수이면 Y축의 범위가 계열 최댓값에서 계열 최솟값까지입니다. 여러 시리즈의 경우 'allfixed'를 사용합니다. 'allmaximized' - 'maximized'와 동일하지만 여러 배율을 표시할 때 사용됩니다. 두 차트 모두 동일한 배율 내에서 최대화됩니다. 즉, Y축에 대해 허위로 진술되지만 각 계열 위로 마우스를 가져가면 실제 값이 표시됩니다. 'allfixed' - '고정'과 동일하지만 여러 개의 체중계가 표시되는 경우에 사용됩니다. 이 설정은 적용되는 계열에 따라 각 배율을 조정합니다 (`scaleColumns`와 함께 사용). 최솟값 또는 최댓값을 지정하면 배율 유형에 따라 결정되는 최솟값과 최댓값보다 우선 적용됩니다. 유형: 문자열 기본값: '고정'
테이블	주석 테이블과 관련된 옵션이 포함되어 있습니다. 이 객체의 속성을 지정하려면 객체 리터럴 표기법을 사용하면 됩니다. var options: { table: { sortAscending: true, sortColumn: 1 } }; 유형: 객체 기본값: null
table.sortAscending	`true`로 설정하면 주석 테이블의 순서를 반대로 바꾸고 오름차순으로 표시합니다. 유형: 부울 기본값: false
table.sortColumn	주석이 정렬되는 주석 테이블의 열 색인입니다. 색인은 0(주석 라벨 열) 또는 1(주석 텍스트 열)이어야 합니다. 유형: 숫자 기본값: 0
두께	선의 두께를 지정하는 0에서 10까지의 숫자입니다. 여기서 0은 가장 얇은 것입니다. 유형: 숫자 기본값: 0
확대/축소 종료 시간	선택한 확대/축소 범위의 종료일/시간을 설정합니다. 유형: 날짜 기본값: 없음
ZoomStartTime	선택한 확대/축소 범위의 시작 날짜/시간을 설정합니다. 유형: 날짜 기본값: 없음

방법

메서드
`clearChart()`	차트를 삭제하고 할당된 모든 리소스를 해제합니다. 반환 유형: 없음
`draw(data, options, state)`	차트를 그립니다. 반환 유형: 없음
`getContainer()`	주석 차트가 포함된 컨테이너 요소의 핸들을 검색합니다. 반환 유형: DOM 요소 처리
`getSelection()`	표준 `getSelection()` 구현입니다. 선택한 요소는 셀 요소입니다. 사용자가 한 번에 하나의 셀만 선택할 수 있습니다. 반환 유형: 선택 요소의 배열
`getVisibleChartRange()`	`start` 및 `end` 속성이 있는 객체를 반환합니다. 각 속성은 현재 시간 선택을 나타내는 `Date` 객체입니다. 반환 유형: `start` 및 `end` 속성이 있는 객체
`hideDataColumns(columnIndexes)`	지정된 데이터 계열을 차트에서 숨깁니다. 숫자 또는 숫자의 배열이 될 수 있는 하나의 매개변수를 허용합니다. 여기서 0은 첫 번째 데이터 계열을 참조합니다. 반환 유형: 없음
`setVisibleChartRange(start, end)`	표시 범위 (확대/축소)를 지정된 범위로 설정합니다. 원하는 공개 상태 범위의 처음 시간과 마지막 시간을 나타내는 `Date` 유형의 매개변수 두 개를 받아들입니다. 가장 빠른 날짜부터 end까지 모든 항목을 포함하려면 start를 null로 설정하고 start에서 마지막 날짜까지의 모든 항목을 포함하려면 end를 null로 설정합니다. 반환 유형: 없음
`showDataColumns(columnIndexes)`	`hideDataColumns` 메서드를 사용하여 숨겨진 후 차트에서 지정된 데이터 계열을 표시합니다. 숫자 또는 숫자 배열이 될 수 있는 하나의 매개변수를 허용합니다. 여기서 0은 첫 번째 데이터 계열을 참조합니다. 반환 유형: 없음

이벤트

이름

이름
`rangechange`	사용자가 범위 슬라이더를 변경하면 발생합니다. 새 범위 엔드포인트는 `event['start']` 및 `event['end']`으로 제공됩니다. 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`	차트에서 외부 메서드 호출을 사용할 수 있습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 `draw` 메서드를 호출하기 전에 이 이벤트에 대한 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다. 속성: 없음
`select`	사용자가 시각적 항목을 클릭하면 시작됩니다. 어떤 항목이 선택되었는지 알아보려면 `getSelection()`를 호출하세요. 속성: 없음

rangechange

사용자가 범위 슬라이더를 변경하면 발생합니다. 새 범위 엔드포인트는 event['start'] 및 event['end']으로 제공됩니다.

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

차트에서 외부 메서드 호출을 사용할 수 있습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 draw 메서드를 호출하기 전에 이 이벤트에 대한 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다.

속성: 없음

select

사용자가 시각적 항목을 클릭하면 시작됩니다. 어떤 항목이 선택되었는지 알아보려면 getSelection()를 호출하세요.

속성: 없음

데이터 정책

모든 코드와 데이터가 브라우저에서 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.