带注释的时间线

  1. Overview
  2. 示例
  3. 正在加载
  4. 数据格式
  5. 配置选项
  6. 方法
  7. 事件
  8. 数据政策
  9. Notes

概览

带有可选注释的交互式时间序列折线图。

带注解的时间轴现在会自动改用注解图表。

示例

<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 位置，即一个特定的时间；每一行由一组一到三列来描述。

  • 第一列的类型是 date 或 datetime，用于指定图表上该点的 X 值。如果此列的类型是 date（而非 datetime），则 X 轴上的最小时间分辨率为一天。
  • 然后，每个数据行由一组额外的 1 到 3 个列进行描述，具体如下所述：
    • Y 值 - [必需，数字] 每集中的第一列描述的是第一列对应的时间相应行的值。列标签将作为该线条的标题显示在图表上。
    • 注释标题 - [可选，字符串] 如果值列后面是字符串列，并且 displayAnnotations 选项为 true，则此列包含描述此时间点的短标题。例如，如果此线条表示巴西的温度，而这个点是一个非常大的数字，则标题可以是“有史以来最热的一天”。
    • 注释文本 - [可选字符串] 如果此系列具有第二个字符串列，则单元格值将用作此点的附加描述性文本。您必须将选项 displayAnnotations 设置为 true 才能使用此列。如果将 allowHtml 设为 true，则可以使用 HTML 标记；这基本上没有大小限制，但请注意，过长的条目可能会溢出显示部分。 即使您有针对这一点的注解标题列，也不需要有此列。图表不使用列标签。例如，如果这是记录点上最热的一天，您可以这样说：“最近一天的气温下降了 10 度！”。

配置选项

名称 类型 默认 说明
allowHtml boolean false 如果设置为 true，任何包含 HTML 标记的注释文本都将呈现为 HTML。
allowRedraw boolean false

针对此可视化图表第二次及之后对 draw() 的调用启用更高效的重新绘制方法。它只会重新绘制图表区域。如需使用此选项，您必须满足以下要求：

  • allowRedraw 必须为 true
  • displayAnnotations 必须为 false（即您无法显示注释）
  • 您必须传入与首次调用 draw() 时相同的选项和值（allowRedraw 和 displayAnnotations 除外）。
allValuesSuffix string 无 要为比例和图例中的所有值添加的后缀。
annotationsWidth number 25 注释区域在整个图表区域内的宽度（以百分比表示）。 必须是 5-80 之间的数字。
颜色 字符串数组 默认颜色 用于图表线条和标签的颜色。字符串数组。每个元素都是一个采用有效 HTML 颜色格式的字符串。例如，“红色”或“#00cc00”。
dateFormat string “MMMM dd, yyyy”或“HH:mm MMMM dd, yyyy”，具体取决于第一列的类型（分别为日期或日期时间）。 右上角用于显示日期信息的格式。此字段的格式由 java SimpleDateFormat 类指定。
displayAnnotations boolean false 如果此政策设为 true，图表将在所选值上方显示注释。 将此选项设置为 true 时，可以在每个数字列后添加两个可选的注释字符串列，一个用于注释标题，另一个用于注释文本。
displayAnnotationsFilter boolean false 如果此政策设为 true，图表将显示用于过滤注释的过滤条件控件。 当注释很多时，使用此选项。
displayDateBarSeparator boolean true 是否在系列值和图例中的日期之间显示小条形分隔符 ( | )，其中 true 表示是。
displayExactValues boolean false 是否在图表顶部显示经过舍入取整的值以节省空间；false 表示可以。例如，如果设置为 false，56123.45 可能会显示为 56.12k。
displayLegendDots boolean true 是否在图例文本中的值旁边显示点，其中 true 表示是。
displayLegendValues boolean true 是否在图例中显示突出显示的值，其中 true 表示是。
displayRangeSelector boolean true

是否显示缩放范围选择区域（图表底部的区域），其中 false 表示否。

缩放选择器中的轮廓是图表中最后一个系列的对数缩放版本，缩放以适应缩放选择器的高度。
displayZoomButtons boolean true 是否显示缩放链接（“1d 5d 1m”等），其中 false 表示否。
fill number 0 一个介于 0—100（含）之间的数字，用于指定折线图中每条线下方的填充 Alpha 值。100 表示 100% 不透明填充，0 表示完全不填充。填充颜色与其上方的线条颜色相同。
highlightDot string “最近的”

要突出显示的系列上哪个点，以及要在图例中显示的相应值。请从下列值中选择一个：

  • 'nearest' - 沿 X 轴最接近鼠标的值。
  • “last”- 鼠标左侧的下一组值。
legendPosition string “sameRow” 是将彩色图例与缩放按钮和日期放在同一行（“sameRow”）上，还是放在新行（“newRow”）。
max number 自动 要在 Y 轴上显示的最大值。如果最大数据点数量超过此值，系统将忽略此设置，并调整图表，使其在最大数据点上方显示下一个主要刻度标记。此值将优先于由 scaleType 确定的 Y 轴最大值。
分钟 number 自动 要在 Y 轴上显示的最小值。如果最小数据点小于此值，则系统将忽略此设置，并调整图表，在最小数据点下方显示下一个主要对勾标记。此值优先于由 scaleType 确定的 Y 轴最小值。
numberFormats 字符串，或“数字:字符串”对的映射 自动

指定用于设置图表顶部值的格式的数字格式模式。

模式应采用 java DecimalFormat 类指定的格式。

  • 如果未指定，则使用默认格式模式。
  • 如果指定了单个字符串模式，则该模式将用于所有值。
  • 如果指定了映射，则键是序列的（从零开始）索引，值是用于格式化指定系列的模式。
    您无需为图表上的每个系列都添加格式；任何未指定的系列都将使用默认格式。

如果指定此选项，系统会忽略 displayExactValues 选项。
scaleColumns 数字数组 自动

指定要在图表中的 Y 轴刻度线上显示的值。 默认设置是右侧只有一个刻度，这适用于两个系列；但您可以将图表的不同侧缩放为不同的系列值。

此选项接受一个由 0 到 3 个数字组成的数组，用于指定要用作缩放值的序列（从零开始）的索引。这些值的显示位置取决于您在数组中添加的值数量：

  • 如果您指定空数组，则图表不会在刻度线旁边显示 Y 值。
  • 如果您指定一个值，所指示系列的刻度将仅显示在图表的右侧。
  • 如果您指定了两个值，则系统会在图表右侧添加第二个系列的刻度。
  • 如果您指定了三个值，则系统会在图表中间添加第三个系列的刻度。
  • 数组中第三个值之后的所有值都将被忽略。

显示多个缩放比例时，建议将 scaleType 选项设置为“allfixed”或“allmaximized”。
scaleType string “已修复”

设置 Y 轴上显示的最大值和最小值。您可以使用以下选项：

  • 'maximized' - Y 轴将跨越系列的最小值和最大值。如果您有多个系列，请使用全部最大化。
  • 'fixed' [默认] - Y 轴因数据值而异：
    • 如果所有值均 >=0，则 Y 轴的范围将介于 0 到最大数据值之间。
    • 如果所有值均 <=0，则 Y 轴的范围将介于 0 到最小数据值之间。
    • 如果值同时为正值和负值，则 Y 轴的范围将从系列最大值到系列最小值。

      对于多个系列，请使用“allfixed”。
  • “allmaximized”- 与“maximized”相同，但在显示多个比例时使用。两个图表将在同一刻度内最大化，这意味着其中一个图表在 Y 轴上的表示不正确，但将鼠标悬停在每个数据系列上可显示其真实值。
  • “allfixed”- 与“fixed”相同，但在显示多个比例时使用。 此设置会根据其适用的系列将每个刻度调整为（将此设置与 scaleColumns 结合使用）。

如果您指定最小值和/或最大值，它们的优先级将高于缩放类型确定的最小值和最大值。
厚度 number 0 一个介于 0—10（含）之间的数字，用于指定线条的粗细，其中 0 表示最细。
Wmode string '窗口' Flash 图表的窗口模式 (Wmode) 参数。可用值包括“opaque”“window”或“transparent”。
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 方法来获取这些属性。
  • start：日期。缩放范围的开始时间。
  • end：日期。缩放范围的结束时间。
准备就绪 该图表已准备好进行外部方法调用。如果您想要与图表交互并在绘制图表后调用相应方法，则应在调用 draw 方法之前为此事件设置监听器，并且仅在事件触发后调用监听器。 无
select 当用户点击注释标志（标记）时，数据表中的相应单元格会被选中。然后，可视化图表会触发此事件。 无

注意：由于某些限制，如果您在浏览器中以文件（例如“file://”），而不是从服务器（例如，"http://www").

数据政策

所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。

说明

由于 Flash 安全设置，当从浏览器的文件位置（如 file:///c:/webhost/myhost/myviz.html）而不是网络服务器网址（如 http://www.myhost.com/myviz.html）进行访问时，此（以及所有基于 Flash 的可视化）可能无法正常运行。这通常只是测试问题。您可以按照 Macromedia 网站上的说明来解决此问题。