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

How to set hAxis.viewWindow.max for a LineChart when the major axis is typeofday?

本文关键字：主轴 typeofday max hAxis LineChart 设置 viewWindow      更新时间：2023-09-26

我需要画一个图表来实时显示一天内数据的演变。我一直在Google Charts Playground上玩，看看它是如何可视化的，但我无法设置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 点，但我需要轴一直到午夜。

我尝试使用"日期时间"作为列类型，但遇到了同样的问题。

下面的示例使用数字，按照我想要的方式工作，在我的点所在的位置绘制线，但扩展网格直到我的最大值：

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}}}
          );
}

​

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 中拥有的最大"时间"值（实际上是最后添加的行）。

相关文章：