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