注解图表

概览

注释图表是支持注释的交互式时间序列折线图。请注意,带注解的时间轴现在会自动使用注解图表。

混淆提醒:目前,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 列描述。

  • 第一列的类型为 datedatetime,用于指定图表上点的 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 轴上显示的最大值。如果最大数据点超过此值,系统会忽略此设置,而图表将调整为在最大数据点上方显示下一个主要刻度线。该优先级的优先级高于由 scaleType 确定的 Y 轴最大值。

这类似于核心图表中的 maxValue

类型:数字
默认:自动
分钟

要在 Y 轴上显示的最小值。如果最小数据点小于此值,系统会忽略此设置,而图表将调整为显示低于该最低数据点的下一个主要刻度线。该优先级将优先于由 scaleType 确定的 Y 轴最小值。

这类似于核心图表中的 minValue

类型:数字
默认:自动
数字格式

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

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

  • 如果未指定,则使用默认格式模式。
  • 如果指定了单个字符串模式,则将其用于所有值。
  • 如果指定了映射,则键为(从零开始)的系列索引,而值是用于设置指定系列格式的模式。

    您无需为图表上的每个系列添加格式;任何未指定的系列都将使用默认格式。

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

类型:字符串或“数字:字符串”对的映射
默认:自动
缩放列

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

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

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

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

类型:数字数组
默认:自动
缩放格式

用于轴刻度标签的数字格式。'#' 的默认值显示为整数。

类型:字符串
默认:“#”
缩放类型

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

  • “maximized”- Y 轴将跨越数据系列的最小值。如果您有多个系列,请使用 allmaximized。
  • 'Fix' [默认] - Y 轴根据数据值的不同而不同:
    • 如果所有值均大于等于 0,则 Y 轴将范围从零到最大数据值。
    • 如果所有值均小于等于 0,则 Y 轴的范围将是从零到最小值。
    • 如果值为正值和负值,则 Y 轴的范围为数据系列最大值到最小值。
      如果您有多个系列,请使用“allFix”。
  • “allmaximized”- 与“maximized”相同,但在显示多个体重秤时使用。这两个图表将在同一量表内最大化,这意味着将有一张针对 Y 轴的虚假陈述,但将鼠标悬停在每个系列上则会显示其实际值。
  • “allFix”- 与“Fixed”相同,但在显示多个体重秤时使用。此设置可调整每个缩放到其适用的系列(与 scaleColumns 结合使用)。

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

类型:字符串
默认:设为“固定”。

包含与注解表相关的选项。如需指定此对象的属性,您可以使用对象字面量表示法:

var options: {
  table: {
    sortAscending: true,
    sortColumn: 1
  }
};
      
Type:对象
默认:null
排序升序

如果设置为 true,则会反转注解表的顺序,并以升序显示它们。

类型:布尔值
默认:false
Table.sortColumn

将对其排序的注解表的列索引。对于注解标签列,索引必须为 0;对于注解文本列,索引必须为 1。

类型:数字
默认:0
厚度

介于 0-10(含 0 和 10)之间的数字,用于指定线条的粗细,其中 0 表示最细。

类型:数字
默认:0
zoomEndTime

设置所选缩放范围的结束日期/时间。

类型:日期
默认:无
zoomStartTime

设置所选缩放范围的开始日期/时间。

类型:日期
默认:无

方法

方法
clearChart()

清除该图表,并释放其分配的所有资源。

返回值类型:无
draw(data, options, state)

绘制图表。

返回值类型:无
getContainer()

用于检索包含注解图表的容器元素的句柄。

返回值类型:DOM 元素的句柄
getSelection()

标准 getSelection() 实现。所选元素是单元格元素。 用户一次只能选择一个单元格。

返回值类型:一组选择元素
getVisibleChartRange()

返回具有 startend 属性的对象,这两个属性都是 Date 对象,代表当前的时间选择。

返回值类型:具有 startend 属性的对象
hideDataColumns(columnIndexes)

在图表中隐藏指定的数据系列。接受一个参数,该参数可以是数字或数字数组,其中 0 表示第一个数据系列,以此类推。

返回值类型:无
setVisibleChartRange(start, end)

将可见范围(缩放)设置为指定范围。接受 Date 类型的两个参数,它们表示所需所选可见范围的第一个时间和最后一个时间。将 start 设置为 null 可包含从最早日期到 end 的所有内容;将 end 设置为 null 以包含从 start 到最后日期的所有内容。

返回值类型:无
showDataColumns(columnIndexes)

使用 hideDataColumns 方法隐藏图表中的指定数据系列后显示它们。接受一个参数,该参数可以是数字或数字数组,其中 0 表示第一个数据系列,以此类推。

返回值类型:无

事件

名称
rangechange

在用户更改范围滑块时触发。新的范围端点将以 event['start']event['end'] 的形式提供:

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

此图表已准备好进行外部方法调用。如果您想与图表交互,并在绘制后调用方法,则应在调用 draw 方法之前为此事件设置监听器,并仅在事件触发后调用它们。

属性:无
select

在用户点击视觉实体时触发。如需了解所选内容,请调用 getSelection()

属性:无

数据政策

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