概览
注释图表是支持注释的交互式时间序列折线图。请注意,带注释的时间轴现在会自动使用注释图表。
混淆提醒:目前,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 位置,即特定时间;每一行由一组一到三列来描述。
- 第一列的类型是 date或datetime,用于指定图表上该点的 X 值。如果此列的类型是date(而非datetime),则 X 轴上的最小时间分辨率为一天。
- 然后,每个数据行由一组额外的 1 到 3 个列进行描述,具体如下所述:
 - Y 值 - [必需,数字] 每集中的第一列描述的是第一列对应的时间相应行的值。列标签将作为该线条的标题显示在图表上。
- 注释标题 - [可选,字符串] 如果值列后面是字符串列,并且 displayAnnotations选项为 true,则此列包含描述此时间点的短标题。例如,如果此线条表示巴西的温度,而这个点是一个非常大的数字,则标题可以是“有史以来最热的一天”。
- 注释文本 - [可选字符串] 如果此系列具有第二个字符串列,则单元格值将用作此点的附加描述性文本。您必须将选项 displayAnnotations设置为 true 才能使用此列。如果将allowHtml设为true,则可以使用 HTML 标记;这基本上没有大小限制,但请注意,过长的条目可能会溢出显示部分。 即使您有针对这一点的注解标题列,也不需要有此列。图表不使用列标签。例如,如果这是记录点上最热的一天,您可以这样说:“最近一天的气温下降了 10 度!”。
 
配置选项
| 名称 | |
|---|---|
| allowHtml | 如果设置为 true,任何包含 HTML 标记的注释文本都将呈现为 HTML。 类型:布尔值 默认值:false | 
| allValuesSuffix | 要为图例和纵轴中刻度线标签中的所有值添加的后缀。 类型:字符串 默认:none | 
| annotationsWidth | 在整个图表区域内,注释区域的宽度(以百分比表示)。必须是 5-80 之间的数字。 类型:数字 默认值:25 | 
| 颜色 | 用于图表线条和标签的颜色。字符串数组。每个元素都是一个采用有效 HTML 颜色格式的字符串。例如,“red”或“#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(含)之间的数字,用于指定折线图中每条线下方的填充 Alpha 值。100 表示 100% 不透明,0 表示完全不填充。填充颜色与其上方的线条颜色相同。 类型:数字 默认值:0 | 
| legendPosition | 是将彩色图例与缩放按钮和日期放在同一行(“sameRow”)上,还是放在新行(“newRow”)。 类型:字符串 默认:“sameRow” | 
| max | 
        要在 Y 轴上显示的最大值。如果最大数据点数量超过此值,系统将忽略此设置,并调整图表,使其在最大数据点上方显示下一个主要刻度标记。此值优先于由  这类似于核心图表中的  类型:数字 默认:自动 | 
| 分钟 | 
        要在 Y 轴上显示的最小值。如果最小数据点小于此值,则系统将忽略此设置,并调整图表,在最小数据点下方显示下一个主要刻度标记。此值优先于由  这类似于核心图表中的  类型:数字 默认:自动 | 
| numberFormats | 指定用于设置图表顶部值的格式的数字格式模式。 模式应采用 java DecimalFormat 类 
 如果指定此选项,系统会忽略  类型:字符串或“数字:字符串”对的映射 默认:自动 | 
| scaleColumns | 指定要在图表的 Y 轴刻度线上显示的值。默认设置是右侧只有一个缩放,这适用于两个系列;但您可以将图表的不同侧缩放为不同的系列值。 此选项接受一个由 0 到 3 个数字组成的数组,用于指定要用作缩放值的序列(从零开始)的索引。这些值的显示位置取决于您在数组中包含多少个值: 
 
        显示多个缩放比例时,建议将  类型:数字数组 默认:自动 | 
| scaleFormat | 
        用于轴刻度线标签的数字格式。默认值  类型:字符串 默认值:“#” | 
| scaleType | 设置 Y 轴上显示的最大值和最小值。您可以使用以下选项: 
 如果您指定最小值和/或最大值,它们的优先级将高于由缩放类型确定的最小值和最大值。 类型:字符串 默认:“fixed” | 
| 桌子 | 包含与注解表相关的选项。如需指定此对象的属性,您可以使用对象字面量表示法: 
var options: {
  table: {
    sortAscending: true,
    sortColumn: 1
  }
};
      类型:object 默认值:null | 
| table.sortAscending | 
        如果设置为  类型:布尔值 默认值:false | 
| table.sortColumn | 将对注释进行排序的注释表的列索引。对于注释标签列,索引必须为 0;对于注释文本列,索引必须为 1。 类型:数字 默认值:0 | 
| 厚度 | 一个 0—10(含)之间的数字,用于指定线条的粗细,其中 0 是最细的线。 类型:数字 默认值:0 | 
| zoomEndTime | 设置所选缩放范围的结束日期/时间。 类型:日期 默认:none | 
| zoomStartTime | 设置所选缩放范围的开始日期/时间。 类型:日期 默认:none | 
方法
| 方法 | |
|---|---|
| clearChart() | 清除图表,并释放为其分配的所有资源。 Return Type(返回类型):none | 
| draw(data, options, state) | 绘制图表。 Return Type(返回类型):none | 
| getContainer() | 检索包含注释图表的容器元素的句柄。 返回类型:DOM 元素的句柄 | 
| getSelection() | 
        标准的  返回类型:选择元素数组 | 
| getVisibleChartRange() | 
        返回一个具有  
        返回值类型:具有  start和end属性的对象 | 
| hideDataColumns(columnIndexes) | 在图表中隐藏指定的数据系列。接受一个参数,该参数可以是数字或数字数组,其中 0 表示第一个数据系列,依此类推。 Return Type(返回类型):none | 
| setVisibleChartRange(start, end) | 
        将可见范围(缩放)设为指定范围。接受两个类型为  Return Type(返回类型):none | 
| showDataColumns(columnIndexes) | 
        显示图表中指定的数据系列(使用  Return Type(返回类型):none | 
事件
| 名称 | |
|---|---|
| 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 | 
      当用户点击视觉实体时触发。如需了解已选择的内容,请调用  属性:无 | 
数据政策
所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。