Annotation Chart

注释图表是支持注释的交互式时间序列折线图表。注意，带注释的时间轴现在自动使用注释图表。

<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: 500px;'></div>
  </body>
</html>

加载注释图表库

  google.charts.load("current", {packages: ['annotationchart']});

初始化图表

  var visualization = new google.visualization.AnnotationChart(container);

数据格式

您可以在图表上显示一条或多条线。每一行代表图表上的一个X位置，即一个特定的时间;每一行由一到三列组成。

第一列的类型是date或datetime，它指定图表上该点的X值。如果这一列的类型是date(而不是datetime)，那么X轴上最小的时间分辨率将是一天。
然后，每条数据线由一至三列组成，如下所述:
Y值- [Required, Number]每个集合的第一列描述了从第一列开始对应时间行的值。列标签作为该线的标题显示在图表上。
注释标题-[Required，String]如果字符串列位于value列之后，且displayAnnotations选项为true，则此列拥有一个描述此点的短标题。例如，如果这条线代表巴西的温度，而这一点是一个非常高的数字，标题可能是“有记录以来最热的一天”。
注释文本—[Optional string]如果本系列中存在第二个字符串列，则单元格值将用作该点的附加描述性文本。要使用此列，必须将选项displayAnnotations设置为true。如果将allowHtml设置为true，可以使用HTML标记;基本上没有大小限制，但是请注意，过长的条目可能会溢出display部分。即使此时有一个annotation title列，也不需要这个列。图表不使用列标签。例如，如果这是有记录以来最热的一天，你可能会说“最近的一天比今天冷10度!”

Methods

Method
`clearChart()`	清除图表，并释放其分配的所有资源。 Return Type: none
`draw(data, options,state)`	绘制图表。 Return Type: none
`getContainer()`	检索包含注释图表的容器元素的句柄。 Return Type: Handle to a DOM element
`getSelection()`	标准getSelection()实现。所选元素是单元格元素。用户一次只能选择一个单元格。Return Type: Array of selection elements
`getVisibleChartRange()`	返回具有start和end属性的对象，其中每个属性都是Date对象，表示当前的时间选择。 Return Type: An object with `start` and `end` properties
`hideDataColumns(columnIndexes)`	从图表中隐藏指定的数据序列。接受一个参数，该参数可以是数字或数字数组，其中0表示第一个数据序列，依此类推。 Return Type: none
`setVisibleChartRange(start, end)`	将可见范围(缩放)设置为指定范围。接受Date类型的两个参数，它们表示所需选择的可视范围的第一次和最后一次。将start设置为null，以包含从最早日期到结束的所有内容;将end设置为null，以包含从开始到最后一个日期的所有内容。 Return Type: none
`showDataColumns(columnIndexes)`	显示图表中使用hideDataColumnsmethod隐藏后的指定数据序列。接受一个参数，该参数可以是数字或数字数组，其中0表示第一个数据序列，依此类推。 Return Type: none

Events

Name

Name
`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']); } Properties: start, end
`ready`	图表已经为外部方法调用做好了准备。如果您希望与图表交互，并在绘制图表后调用方法，则应该在调用draw方法之前为该事件设置一个侦听器，并仅在事件触发后调用它们。 Properties: none
`select`	当用户单击一个可视实体时触发。要了解所选择的内容，请调用getSelection()。 Properties: none

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

Properties: start, end

ready

图表已经为外部方法调用做好了准备。如果您希望与图表交互，并在绘制图表后调用方法，则应该在调用draw方法之前为该事件设置一个侦听器，并仅在事件触发后调用它们。

Properties: none

select

当用户单击一个可视实体时触发。要了解所选择的内容，请调用getSelection()。