概览
带有可选注解的交互式时间序列折线图。
带注释的时间轴现在会自动改用注解图表。
示例
<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 值。如果此列的类型为date
(而非datetime
),则 X 轴上的最小时间分辨率将为一天。 - 每个数据行由一组额外的一到三列进行描述,如下所述:
- Y 值 - [必填,数字] 每组的第一列描述第一列中对应时间的线值。列标签在图表中显示为该行的标题。
- 注解标题 - [可选,字符串] 如果字符串列跟随值列,并且
displayAnnotations
选项为 true,则此列包含描述此点的短标题。例如,如果此线条表示巴西的温度,并且该点数值非常高,那么标题可能是“有记录的日期最热”。 - 注解文本 - [可选字符串] 如果此系列有第二个字符串列,则此单元格值将用作此点的其他描述性文本。您必须将选项
displayAnnotations
设为 true 才能使用此列。如果您将allowHtml
设置为true
,则可以使用 HTML 标记;基本上没有大小限制,但请注意,过长的条目可能会导致显示部分溢出。 即使您拥有此列的注解标题列,也不需要使用此列。图表不使用列标签。例如,如果这是有史以来最热的一天,您可能会说“下一个最近的日期是气温下降了 10 度!”之类的内容。
配置选项
名称 | 类型 | 默认 | 说明 |
---|---|---|---|
allowHTML | 布尔值 | false | 如果设置为 true,则任何包含 HTML 标记的注释文本都将呈现为 HTML。 |
allowRedraw | 布尔值 | false | 针对这种可视化图表对第二次和之后对
|
allValues 后缀 | 字符串 | 无 | 将添加到体重秤和图例中所有值的后缀。 |
注释宽度 | number | 25 | 注释区域在整个图表区域内的宽度(以百分比的形式表示)。 必须是 5-80 范围内的数字。 |
颜色 | 字符串数组 | 默认颜色 | 用于图表线条和标签的颜色。字符串数组。每个元素都是一个采用有效 HTML 颜色格式的字符串。例如“red”或“#00cc00”。 |
日期格式 | 字符串 | “MMMM dd, yyyy”或“HH:mm MMMM dd, yyyy”,具体取决于第一列的类型(分别为日期或日期时间)。 | 用于显示日期格式的格式。 此字段的格式由 java SimpleDateFormat 类指定。 |
displayAnnotations | 布尔值 | false | 如果设置为 true,则图表会在所选值之上显示注解。此选项设置为 true 时,系统会在每个数字列后面添加两个可选的注释字符串列,一个用于注释标题,另一个用于注释文本。 |
displayAnnotationsFilter | 布尔值 | false | 如果设置为 true,图表将显示用于过滤注释的过滤器。如果有许多注解,请使用此选项。 |
displayDateBarSeparator 类中的方法 | 布尔值 | true | 是否在系列值和图例中的日期之间显示小条形图分隔符 ( | ),其中 true 表示是。 |
displayExactValues | 布尔值 | false | 是否在图表顶部显示值的缩短版圆角版本,以节省空间;false 表示可以。例如,如果设置为 false,56123.45 可能会显示为 56.12k。 |
displayLegendDots | 布尔值 | true | 是否显示图例文本值旁边的点,其中 true 表示是。 |
displayLegendValues | 布尔值 | true | 是否显示图例中突出显示的值,其中 true 表示是。 |
displayRangeSelector | 布尔值 | true | 是否显示缩放范围选择区域(图表底部的区域),其中 false 表示否。 缩放选择器中的轮廓是图表中最后系列的对数缩放,根据缩放选择器的高度进行调整。 |
displayZoomButtons | 布尔值 | true | 是否显示缩放链接(“1d 5d 1m”等),其中 false 表示否。 |
fill | number | 0 | 介于 0—100(含)之间的数字,用于指定折线图中每行下方填充的 Alpha 值。100 表示 100% 不透明填充,0 表示完全没有填充。填充色与其上一行的颜色相同。 |
突出显示的圆点 | 字符串 | “最近” | 要突出显示的系列中的哪个点,以及要在图例中显示的相应值。从以下值中选择一个:
|
图例位置 | 字符串 | “sameRow” | 是将彩色图例放在同一行(包含缩放按钮和日期)(“sameRow”)还是放在新行(“newRow”)。 |
最大值 | number | 自动 | Y 轴上显示的最大值。如果最大数据点超过此值,系统会忽略此设置,而图表将调整为在最大数据点上方显示下一个主要刻度线。该优先级将优先于由 scaleType 确定的 Y 轴最大值。 |
分钟 | number | 自动 | 要在 Y 轴上显示的最小值。如果最小数据点小于此值,系统将忽略此设置,并将调整图表,以显示在最低数据点下方显示下一个主要刻度线。该优先级将优先于由 scaleType 确定的最小 Y 轴。 |
数字格式 | 字符串,或“数字:字符串”对的映射 | 自动 | 指定图表顶部用于设置值的格式的数字格式。 格式应采用 java DecimalFormat 类指定的格式。
如果指定此选项, |
缩放列 | 数字数组 | 自动 | 指定要在图表中的 Y 轴刻度线上显示哪些值。默认情况下,右侧有一个缩放比例,它同时适用于两个数据系列;但图表的不同侧边可以缩放为不同的系列值。 此选项采用 0 到 3 个数字的数组,该数组指定了将用作缩放比例的系列值(从零开始)。这些值的显示位置取决于您在数组中添加的值数量:
当显示多个缩放时,建议将 |
缩放类型 | 字符串 | “已修复” | 设置 Y 轴上显示的最大值和最小值。您可以使用以下选项:
如果您指定最小值和/或最大值,它们将优先于缩放比例所确定的最小值和最大值。 |
厚度 | number | 0 | 介于 0-10(含 0 和 10)之间的数字,用于指定线条的粗细,其中 0 表示最细。 |
Wmode | 字符串 | “窗口” | Flash 图表的窗口模式 (wmode) 参数。可用的值为“opaque”、“window”或“transparency”。 |
zoomEndTime | 日期 | 无 | 设置所选缩放范围的结束日期/时间。 |
zoomStartTime | 日期 | 无 | 设置所选缩放范围的开始日期/时间。 |
方法
方法 | 返回值类型 | 说明 |
---|---|---|
draw(data, options) |
无 | 绘制图表。您可以使用 allowRedraw 属性缩短对 draw() 的第二次调用和后续调用的响应时间。 |
getSelection() |
选择元素数组 | 标准 getSelection() 实现。所选元素是单元格元素。用户一次只能选择一个单元格。 |
getVisibleChartRange() |
一个具有 start 和 end 属性的对象 |
返回具有 start 和 end 属性的对象,这两个属性都是 Date 对象,代表当前的时间选择。 |
hideDataColumns(columnIndexes) |
无 | 在图表中隐藏指定的数据系列。 接受一个参数,该参数可以是数字或数字数组,其中 0 表示第一个数据系列,依此类推。 |
setVisibleChartRange(start, end) |
无 | 将可见范围(缩放)设为指定范围。
接受 Date 类型的两个参数,它们表示所需所选可见范围的第一个时间和最后一个时间。将 start 设置为 null 可包含从最早日期到 end 的所有内容;将 end 设置为 null 以包含从 start 到最后日期的所有内容。 |
showDataColumns(columnIndexes) |
无 | 使用 hideDataColumns 方法隐藏图表中的指定数据系列(显示在图表上)。接受一个参数,该参数可以是数字或数字数组,其中 0 表示第一个数据系列,依此类推。 |
事件
名称 | 说明 | 属性 |
---|---|---|
范围变化 | 缩放范围已更改。在用户修改可见时间范围后触发,但在调用 setVisibleChartRange 方法之后触发。注意:建议不要使用事件属性,而是通过调用 getVisibleChartRange 方法获取这些属性。 |
|
准备就绪 | 此图表已准备好进行外部方法调用。如果您希望与图表交互,并在绘制后调用方法,则应在调用 draw 方法之前为此事件设置监听器,并仅在事件触发后调用它们。 |
无 |
select | 当用户点击注释标志(标记)时,系统会选择数据表中的相应单元格。可视化图表随后触发此事件。 | 无 |
注意:由于存在某些限制,因此,如果您在浏览器中将网页作为文件(例如"file://"),而不是服务器(例如“http://www”)。
数据政策
所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。
说明
根据 Flash 安全设置,如果从浏览器的文件位置(如 file:///c:/webhost/myhost/myviz.html)而不是网络服务器网址(如 http://www.myhost.com/myviz.html)进行访问,则此类情况(以及所有基于 Flash 的可视化效果)可能无法正常运行。这通常只是一个测试问题。如 Macromedia 网站中所述,您可以解决此问题。