주석이 달린 타임라인

  1. 개요
  2. 예
  3. 로드 중
  4. 데이터 형식
  5. 구성 옵션
  6. 메서드
  7. 이벤트
  8. 데이터 정책
  9. 참고

개요

선택적 주석이 있는 대화형 시계열 선 차트

주석이 달린 타임라인에서 대신 주석 차트가 자동으로 사용됩니다.

예

<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

이 시각화에서 두 번째 및 이후의 draw() 호출에 더 효율적인 다시 그리기 기법을 사용 설정합니다. 차트 영역만 다시 그립니다. 이 옵션을 사용하려면 다음 요구사항을 충족해야 합니다.

  • allowRedraw가 true여야 합니다.
  • displayAnnotations는 false여야 합니다. 즉, 주석을 표시할 수 없습니다.
  • draw()을 처음 호출할 때와 동일한 옵션과 값 (allowRedraw 및 displayAnnotations 제외)을 전달해야 합니다.
모든값 서픽스 문자열 없음 체중계 및 범례의 모든 값에 추가될 서픽스입니다.
annotationWidth 숫자 25 전체 차트 영역에서 주석 영역의 너비 (백분율)입니다. 5~80 사이의 숫자여야 합니다.
색상 문자열 배열 기본 색상 차트 선 및 라벨에 사용할 색상입니다. 문자열 배열입니다. 각 요소는 유효한 HTML 색상 형식의 문자열입니다. 예: '빨간색' 또는 '#00cc00'
날짜 형식 문자열 첫 번째 열의 유형에 따라 'MMMM dd, yyyy' 또는 'HH:mm MMMM dd, yyyy'입니다 (각각 날짜 또는 날짜/시간). 오른쪽 상단에 날짜 정보를 표시하는 데 사용되는 형식입니다. 이 필드의 형식은 java SimpleDateFormat 클래스에 지정되어 있습니다.
displayAnnotations boolean false true로 설정하면 차트가 선택된 값 위에 주석을 표시합니다. 이 옵션을 true로 설정하면 모든 숫자 열 뒤에 주석 제목 열과 주석 텍스트에 각각 하나씩 2개의 선택적 주석 문자열 열을 추가할 수 있습니다.
displayAnnotations 필터 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은 전혀 채워지지 않음을 의미합니다. 채우기 색상은 위 선과 동일한 색상입니다.
하이라이트 문자열 '가장 가까운'

계열에서 강조표시할 점 및 범례에 표시할 해당 값 다음 값 중 하나를 선택하세요.

  • 'nearest' - 마우스가 X축에 가장 가까운 값입니다.
  • 'last' - 마우스 왼쪽의 다음 값 세트.
범례 위치 문자열 'sameRow' 컬러 범례를 확대/축소 버튼과 날짜가 있는 같은 행('sameRow') 또는 새 행('newRow')에 배치할지 여부입니다.
max 숫자 자동 사전 처리와 Y축에 표시되는 최댓값입니다. 최대 데이터 포인트가 이 값을 초과하면 이 설정이 무시되고 차트가 최대 데이터 포인트 위에 다음 주요 눈금 표시를 표시하도록 조정됩니다. 이는 scaleType에 의해 결정되는 Y축 최댓값보다 우선합니다.
min 숫자 자동 사전 처리와 Y축에 표시되는 최솟값입니다. 최소 데이터 포인트가 이 값보다 작으면 이 설정이 무시되고 차트가 조정되어 최소 데이터 포인트 아래에 다음 주요 눈금 표시가 표시됩니다. 이는 scaleType에 의해 결정되는 Y축 최솟값보다 우선합니다.
숫자 형식 문자열 또는 숫자:문자열 쌍의 맵 자동 사전 처리와

그래프 상단에서 값의 형식을 지정하는 데 사용할 숫자 형식 패턴을 지정합니다.

패턴은 자바 DecimalFormat 클래스에 지정된 형식이어야 합니다.

  • 지정하지 않으면 기본 형식 패턴이 사용됩니다.
  • 단일 문자열 패턴이 지정되면 모든 값에 사용됩니다.
  • 맵이 지정된 경우 키는 연속된 색인 (0부터 시작)이고 값은 지정된 계열의 형식을 지정하는 데 사용되는 패턴입니다.
    차트에 모든 계열의 형식을 포함하지 않아도 됩니다. 지정되지 않은 계열은 기본 형식을 사용합니다.

이 옵션을 지정하면 displayExactValues 옵션이 무시됩니다.
scaleColumn 숫자 배열 자동

그래프에서 Y축 눈금 표시에 표시할 값을 지정합니다. 기본값은 오른쪽에 단일 축척이 지정되는 것으로, 두 계열에 모두 적용되지만 그래프의 여러 면을 여러 계열 값에 맞게 조정할 수 있습니다.

이 옵션은 배율 값으로 사용할 시리즈의 색인 (0부터 시작)을 지정하는 0~3자리 숫자 배열을 사용합니다. 이러한 값이 표시되는 위치는 배열에 포함된 값의 수에 따라 다릅니다.

  • 빈 배열을 지정하면 차트의 눈금 옆에 Y 값이 표시되지 않습니다.
  • 값을 1개 지정하면 지정된 계열의 척도가 차트의 오른쪽에만 표시됩니다.
  • 두 개의 값을 지정하면 두 번째 계열의 척도가 차트 오른쪽에 추가됩니다.
  • 3개의 값을 지정하면 세 번째 계열의 척도가 차트 중앙에 추가됩니다.
  • 배열의 세 번째 값 이후의 모든 값은 무시됩니다.

배율을 두 개 이상 표시할 때는 scaleType 옵션을 'allfixed' 또는 'allmaximized'로 설정하는 것이 좋습니다.

배율 유형 문자열 '고정'

Y축에 표시되는 최댓값과 최솟값을 설정합니다. 사용할 수 있는 옵션은 다음과 같습니다.

  • 'maximized' - Y축이 최솟값을 계열의 최댓값으로 펼칩니다. 시리즈가 여러 개인 경우 allmaximized를 사용하세요.
  • 'fixed'[기본값] - Y축은 데이터 값 값에 따라 다릅니다.
    • 모든 값이 0 이상이면 Y축이 0부터 최대 데이터 값으로 확장됩니다.
    • 모든 값이 0보다 작으면 Y축이 0부터 최소 데이터 값으로 확장됩니다.
    • 값이 양수와 음수이면 Y축의 범위가 계열 최댓값에서 계열 최솟값까지입니다.

      여러 시리즈의 경우 'allfixed'를 사용합니다.
  • 'allmaximized' - 'maximized'와 같지만 여러 개의 척도가 표시되는 경우에 사용됩니다. 두 차트 모두 동일한 배율로 최대화됩니다. 즉, Y축을 기준으로 허위로 진술되지만 각 계열 위로 마우스를 가져가면 실제 값이 표시됩니다.
  • 'allfixed' - '고정'과 동일하지만 여러 개의 체중계가 표시되는 경우에 사용됩니다. 이 설정은 적용되는 계열에 따라 각 배율을 조정합니다 (scaleColumns와 함께 사용).

최솟값 또는 최댓값을 지정하면 확장 유형에 따라 결정된 최솟값과 최댓값보다 우선 적용됩니다.
두께 숫자 0 선의 두께를 지정하는 0에서 10까지의 숫자입니다. 여기서 0은 가장 얇은 것입니다.
WMode 문자열 '창' 플래시 차트의 창 모드 (wmode) 매개변수입니다. 사용 가능한 값은 '불투명', '창', '투명'입니다.
확대/축소 종료 시간 날짜 없음 선택한 확대/축소 범위의 종료일/시간을 설정합니다.
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 메서드를 호출하여 가져오는 것이 좋습니다.
  • start: 날짜. 확대/축소 범위의 시작 시간입니다.
  • end: 날짜. 확대/축소 범위의 종료 시간입니다.
준비됨 차트에서 외부 메서드 호출을 사용할 수 있습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 draw 메서드를 호출하기 전에 이 이벤트에 대한 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다. 없음
select 사용자가 주석 플래그 (마커)를 클릭하면 데이터 테이블에서 해당하는 셀이 선택됩니다. 그러면 시각화에서 이 이벤트를 실행합니다. 없음

참고: 특정 제한사항으로 인해 브라우저에서 페이지에 파일로 액세스하면(예: 'file://')을 전송합니다. 'http://www').

데이터 정책

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

참고사항

Flash 보안 설정으로 인해 웹 서버 URL(예: http://www.myhost.com/myviz.html)이 아니라 브라우저의 파일 위치(예: file:///c:/webhost/myhost/myviz.html)에서 액세스하면 이 Flash 파일 및 모든 시각화 기반 시각화가 올바르게 작동하지 않을 수 있습니다. 이는 일반적으로 테스트 문제일 뿐입니다. Macromedia 웹사이트에 설명된 대로 이 문제를 극복할 수 있습니다.