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只是将其关闭。这可以调整，以便使用自定义值使动画看起来更流畅。

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

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

Highchartjs无法正确呈现数据

1 个答案: