当主轴是typeofday时,如何为LineChart设置hAxis.viewWindow.max？

Question

我需要绘制一张图表,以便在一天内实时显示数据的演变.我一直在玩在谷歌图表游乐场,看看它是如何进行可视化,但我一直没能设置hAxis.viewWindow.max选项,以使X轴固定.

这是我用来测试的代码:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();

  data.addColumn('timeofday', 'x');
  data.addColumn('number', 'S0');
  data.addColumn('number', 'S1');
  data.addColumn('number', 'S2');

  data.addRows([
    [[0,0,0,0],   1,       1,           0.5],
    [[1,0,0,0],   2,       0.5,         1],
    [[2,0,0,0],   4,       1,           0.5],
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {maxValue: 10},
                  hAxis: {maxValue: [23,59,59,0], minValue:[0,0,0,0], viewWindow:{max: [23, 59, 59, 0]}}}
          );
    }

该文档声称hAxis.viewWindow.max接收数字,但我没有找到一种方法将"timeofday"类型表示为数字.使用它,X轴从早上0点到凌晨2点,但我需要轴直到午夜.

我尝试使用"datetime"作为列类型,但问题相同.

下面的示例使用数字按照我的预期方式工作,绘制我的点所在的行,但是将网格扩展到我的最大值:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();

  data.addColumn('number', 'x');
  data.addColumn('number', 'S0');
  data.addColumn('number', 'S1');
  data.addColumn('number', 'S2');

  data.addRows([
    [0,   1,       1,           0.5],
    [1,   2,       0.5,         1],
    [2,   4,       1,           0.5],
  ]);

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

​

Answer 1

X轴将最终达到它的最大值(或者在相同的情况下关闭 - 就像这个一样).例如

的情况下:

data.addRows([
    [[0,0,0,0],   1,       1,           0.5],
    [[1,0,0,0],   2,       0.5,         1],
  ]);

x轴将在1:00结束

的情况下:

 data.addRows([
    [[0,0,0,0],   1,       1,           0.5],
    [[1,0,0,0],   2,       0.5,         1],
    [[23,59,59,0],   4,       1,           0.5],
  ]);

它将在23:59:59结束,显示22:00作为最后的x轴标签.

这意味着无论您在hAxis中定义为max的值,图表都会运行到dataRows中的最大"timeofday"值(实际上是最后添加的行).