已添加注解的时间轴

概览

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

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

示例

<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 列描述。

  • 第一列的类型为 datedatetime,用于指定图表上点的 X 值。如果此列的类型为 date(而非 datetime),则 X 轴上的最小时间分辨率将为一天。
  • 每个数据行由一组额外的一到三列进行描述,如下所述:
    • Y 值 - [必填,数字] 每组的第一列描述第一列中对应时间的线值。列标签在图表中显示为该行的标题。
    • 注解标题 - [可选,字符串] 如果字符串列跟随值列,并且 displayAnnotations 选项为 true,则此列包含描述此点的短标题。例如,如果此线条表示巴西的温度,并且该点数值非常高,那么标题可能是“有记录的日期最热”。
    • 注解文本 - [可选字符串] 如果此系列有第二个字符串列,则此单元格值将用作此点的其他描述性文本。您必须将选项 displayAnnotations 设为 true 才能使用此列。如果您将 allowHtml 设置为 true,则可以使用 HTML 标记;基本上没有大小限制,但请注意,过长的条目可能会导致显示部分溢出。 即使您拥有此列的注解标题列,也不需要使用此列。图表不使用列标签。例如,如果这是有史以来最热的一天,您可能会说“下一个最近的日期是气温下降了 10 度!”之类的内容。

配置选项

名称 类型 默认 说明
allowHTML 布尔值 false 如果设置为 true,则任何包含 HTML 标记的注释文本都将呈现为 HTML。
allowRedraw 布尔值 false

针对这种可视化图表对第二次和之后对 draw() 的调用启用更高效的重新绘制技术。而只会重新绘制图表区域。如需使用此选项,您必须满足以下要求:

  • allowRedraw 必须为 true
  • displayAnnotations 必须为 false(也就是说,您无法显示注解)
  • 您必须传入与首次调用 draw() 相同的选项和值(allowRedraw 和 displayAnnotations 除外)。
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 表示完全没有填充。填充色与其上一行的颜色相同。
突出显示的圆点 字符串 “最近”

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

  • “nearest”- 沿着 X 轴最靠近鼠标的值。
  • “last”- 鼠标左下方的下一组值。
图例位置 字符串 “sameRow” 是将彩色图例放在同一行(包含缩放按钮和日期)(“sameRow”)还是放在新行(“newRow”)。
最大值 number 自动 Y 轴上显示的最大值。如果最大数据点超过此值,系统会忽略此设置,而图表将调整为在最大数据点上方显示下一个主要刻度线。该优先级将优先于由 scaleType 确定的 Y 轴最大值。
分钟 number 自动 要在 Y 轴上显示的最小值。如果最小数据点小于此值,系统将忽略此设置,并将调整图表,以显示在最低数据点下方显示下一个主要刻度线。该优先级将优先于由 scaleType 确定的最小 Y 轴。
数字格式 字符串,或“数字:字符串”对的映射 自动

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

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

  • 如果未指定,则使用默认格式模式。
  • 如果指定了单个字符串模式,则将其用于所有值。
  • 如果指定了映射,则键为(从零开始)的系列索引,而值是用于设置指定系列格式的模式。
    您无需为图表上的每个系列添加格式;任何未指定的系列都将使用默认格式。

如果指定此选项,displayExactValues 选项将被忽略。

缩放列 数字数组 自动

指定要在图表中的 Y 轴刻度线上显示哪些值。默认情况下,右侧有一个缩放比例,它同时适用于两个数据系列;但图表的不同侧边可以缩放为不同的系列值。

此选项采用 0 到 3 个数字的数组,该数组指定了将用作缩放比例的系列值(从零开始)。这些值的显示位置取决于您在数组中添加的值数量:

  • 如果您指定空数组,则图表不会在刻度线旁边显示 Y 值。
  • 如果您指定一个值,则所指示系列的比例将会显示在图表的右侧。
  • 如果您指定两个值,图表系列的第二个系列的缩放比例将添加到图表的右侧。
  • 如果您指定三个值,则第三个系列的比例将添加到图表中间。
  • 数组中第三个值之后的任何值都将被忽略。

当显示多个缩放时,建议将 scaleType 选项设置为“allFix”或“allmaximized”。

缩放类型 字符串 “已修复”

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

  • “maximized”- Y 轴将跨越数据系列的最小值到最大值。如果您有多个系列,请使用 allmaxmax。
  • 'Fix' [默认值] - Y 轴根据数据值的不同而不同:
    • 如果所有值均大于等于 0,则 Y 轴将范围从零到最大数据值。
    • 如果所有值均小于等于 0,则 Y 轴的范围将是从零到最小值。
    • 如果值为正值和负值,则 Y 轴的范围为数据系列最大值到最小值。

      如果有多个系列,请使用“allFix”。
  • 'allmaximized' - 与“maxmaxize”相同,但在显示多个缩放时使用。这两个图表将在同一量表内最大化,这意味着将有一条针对 Y 轴的虚假陈述,但将鼠标悬停在每个系列上则会显示其真实值。
  • “allFix”- 与“Fixed”相同,但在显示多个体重秤时使用。 此设置可将每个尺度调整到所应用的系列(与 scaleColumns 结合使用)。

如果您指定最小值和/或最大值,它们将优先于缩放比例所确定的最小值和最大值。

厚度 number 0 介于 0-10(含 0 和 10)之间的数字,用于指定线条的粗细,其中 0 表示最细。
Wmode 字符串 “窗口” Flash 图表的窗口模式 (wmode) 参数。可用的值为“opaque”、“window”或“transparency”。
zoomEndTime 日期 设置所选缩放范围的结束日期/时间。
zoomStartTime 日期 设置所选缩放范围的开始日期/时间。

方法

方法 返回值类型 说明
draw(data, options) 绘制图表。您可以使用 allowRedraw 属性缩短对 draw() 的第二次调用和后续调用的响应时间。
getSelection() 选择元素数组 标准 getSelection() 实现。所选元素是单元格元素。用户一次只能选择一个单元格。
getVisibleChartRange() 一个具有 startend 属性的对象 返回具有 startend 属性的对象,这两个属性都是 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 网站中所述,您可以解决此问题。