概览
注释图表是支持注释的交互式时间序列折线图。请注意，带注释的时间轴现在会自动使用注释图表。
混淆提醒：目前，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 |
当用户点击视觉实体时触发。如需了解已选择的内容，请调用 属性：无
|
数据政策
所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。