google-visualization - 在 Google 带注释的时间线图上显示一天中的时间

Question

我正在尝试使用 Google 图表 api 创建在 x 轴上具有日期时间而在另一个轴上具有值的折线图。通常这些只会持续 48 小时，所以我真的需要在 x 轴上显示一天中的时间以及天数。

请问有人知道如何实现吗？

或者，任何人都可以建议另一个允许这样做的 Javascript 图表 api 吗？

Answer 1

AnnotatedTimeline 图表陈旧且过时；您可以使用具有“annotation”和“annotationText”列角色以及ChartRangeFilter的LineChart来复制 95% 的功能。LineCharts 支持使用日期时间。

Answer 2

我在温度时间序列上使用morris.js。

想看看其他建议。

Answer 3

@asgallant 是对的。它的外观示例可以在Google Code Playground中看到并粘贴此脚本：

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Time');
  data.addColumn('number', 'Count');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn({type: 'string', role: 'annotationText'});
  data.addRows([
    [new Date(2013, 0, 31, 19, 30),   1, 'A', 'Event 1'],
    [new Date(2013, 1, 2, 20, 30),   2, 'B', 'No event'],
    [new Date(2013, 1, 7, 18, 30),   2.5, 'C', 'No event'],
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {maxValue: 10}}
          );
}