javascript - 使用 Google Charts 和 SteppedAreaChart 绘制值(value)历史记录

Question

我正在从数据库中提取值(value)历史记录。基本上每次值更改时，触发器都会保存旧值、新值以及所述更改的日期和时间。

在网络应用程序中，我需要可视化所述更改。由于这些值不会逐渐变化，因此我决定使用阶梯面积图。

示例输入:

DateTime         | Value
2017-03-14 22:50 | 14
2017-03-14 22:55 | 16
2017-03-14 23:00 | 10

问题在于 Google 图表将其绘制为 14 至 22:50、16 至 22:55 以及 10 至 23:00 的值。我显然需要相反的东西。我需要该行在所述日期时间开始并继续直到值发生变化，而不是渲染值直到间隔。

现在我正在使用折线图来渲染它，因为它完全满足了我的需要。就绘制它们所属的点而言。连接线没有任何意义，但它已经是我所能得到的最接近的了。

有没有一种非黑客的方法可以做到这一点？我基本上需要更改渲染模式

line chart:
/''\__/\_
01  0  10
current stepped area chart behavior:
███▄▄▄█▄▄
01  0  10
desired shape:
▄███▄▄▄█▄
01  0  10
(spaces mean there was no change in value at that time)

有什么非黑客方法可以做到这一点吗？

Answer 1

没有任何标准选项可以设置来获取所需的图表

这一切都归结为输入图表的数据

您需要为每个更改插入一个新行

新行将需要下一个 x 值和上一个 y 值

示例输入:

DateTime         | Value
2017-03-14 22:50 | 14
2017-03-14 22:55 | 14
2017-03-14 22:55 | 16
2017-03-14 23:00 | 16
2017-03-14 23:00 | 10
2017-03-14 23:05 | 10

最后一个“新行”是可选的，但有助于可视化

您可以联合几个 sql 语句从数据库中提取，

但是使用两个谷歌数据表可能会更容易

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'x');
  data.addColumn('number', 'y');

  var newData = data.clone();

  data.addRow([new Date('2017-03-14 22:50'), 14]);
  data.addRow([new Date('2017-03-14 22:55'), 16]);
  data.addRow([new Date('2017-03-14 23:00'), 10]);

  hTicks = [];
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    if (i > 0) {
      newData.addRow([
        data.getValue(i, 0),
        data.getValue(i - 1, 1)
      ]);
    }
    newData.addRow([
      data.getValue(i, 0),
      data.getValue(i, 1)
    ]);
    hTicks.push(data.getValue(i, 0));
  }
  newData.addRow([
    new Date(data.getValue(data.getNumberOfRows() - 1, 0).getTime() + (1000 * 60 * 5)),
    data.getValue(data.getNumberOfRows() - 1, 1)
  ]);

  window.addEventListener('resize', drawChart, false);
  drawChart();

  function drawChart() {
    chart.draw(newData, {
      chartArea: {
        bottom: 60
      },
      hAxis: {
        format: 'yy-MM-dd hh:mm:ss',
        ticks: hTicks
      },
      vAxis: {
        viewWindow: {
          min: 0
        }
      },
      height: 400
    });
  }
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>