Highchartjs 无法正确渲染数据

Question

我正在尝试将数据集提供给 highchart 以呈现为折线图。但是当它启动时，它首先显示了一个很好的绘图，然后就搞砸了。不知道哪里出了问题。

这是jsFiddle 尝试运行它并查看实际效果。

主要代码在这里：

Highcharts.chart('container', {
  chart: {
    type: 'spline',
    animation: Highcharts.svg, // don't animate in old IE
    marginRight: 10,
    events: {
      load: function() {

        var testing = (function() {
          var _x = -1;
          var _max = _data.length;

          return function() {
            _x = (_x + 1) % _max;
            return {
              x: Date.now(),
              y: _data[_x]
            };
          };
        })();

        // set up the updating of the chart each second
        var series = this.series[0];
        setInterval(function() {
          series.addPoint([testing().x, testing().y], true, true);
          //series.setData(_data, true)
        }, 1000);
      }
    }
  },
  series: [{
    name: 'Random data',
    data: (function() {
      var data = [];
      data = _data;
      return data;
    }())
  }]
});

谢谢

Answer 1

问题是你设置了

xAxis: {
  type: 'datetime',
  ...
}

当你初始化你的数据时，你会这样做：

var _data = [0, 0, 0, 0, 0.0000050048828125, ...]

这将创建以下高图结构：

series: [
  {x: 0, y : 0},
  {x: 1, y : 0},
  {x: 2, y : 0},
  {x: 3, y : 0},
  {x: 4, y : 0.0000050048828125},

如果你正确设置了series.line.pointStart，你可以做什么。

但是，在加载图表后，您可以这样做：

var testing = (function() {
  var _x = -1;
  var _max = _data.length;
  return function() {
    _x = (_x + 1) % _max;
    return {
      x: Date.now(),
      y: _data[_x]
    };
  };
})();
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
  series.addPoint([testing().x, testing().y], true, true);
  //series.setData(_data, true)
}, 1000);

告诉 highcart 每秒添加一个点，如下所示：

{x: Date.now(), //1517905592247 at the time of writing this
 y: _data[_x]} //which will give each point some value from _data

因此，问题在于从x = 0, 1, 2到x = 1517905592247, 1517905593247, 1517905594247的过渡

解决方案是在初始化系列时设置x 和y。也就是说，如果你想看看它的外观，你可以设置

series: [{
  pointStart: Date.now()-1000*100, //current time - 100 points 
  pointInterval: 1000, //one point every 1000 milliseconds
  ...
}

您可以看到它在第 60 点之前绘制正确。参见示例：http://jsfiddle.net/ewolden/w4zn7d1r/3/

---

在第 60 点之后还有另一个问题，因为您添加点的方式。

一开始 _data 是一个一维数组。但是，您使用 x 和 y 值分配新点。这使它成为二维的。然后，当您尝试访问此二维数组的索引时，就像您在此处所做的那样y: _data[_x] 它并不顺利。

同样，解决方案是在初始化系列时设置x 和y。

通过复制_data 系列 (var _data2 = _data.slice();)，我们可以看到它的外观：http://jsfiddle.net/ewolden/w4zn7d1r/5/

---

如果您想在 300 毫秒内更新图表，则需要像这样更新参数：

pointStart: Date.now()-300*100,
pointInterval: 300,

setInterval(function() {
  series.addPoint([testing().x, testing().y], true, true, false); //pay attention to the last false here.
}, 300);

addPoint 函数中的最后一个 false 是动画，false 只是将其关闭。可以对此进行调整，以便使用自定义值使动画看起来更流畅。

300ms 的工作示例： http://jsfiddle.net/ewolden/w4zn7d1r/6/

addPoint 上的 API： https://api.highcharts.com/class-reference/Highcharts.Series#addPoint