Question

有很多例子展示了如何实时渲染图表，但它们都使用间隔1秒。

问题是，我得到的数据小于毫秒，实际上小于几微秒。是否有可能在不使用间隔的情况下获取实时数据？

我只能发布示例中给出的代码，因为我完全不知道怎么做：

假设这是我们从服务器获取的实时数据：

let _data = [
  0, 0, 0, 0, 0.0000050048828125, 0.0000137939453125, 0.000049560546875, 0.00008740234375, 0.00015966796875,
  0.000262451171875, 0.0003975830078125, 0.0005687255859375, 0.0007802734375, 0.001037353515625, 0.0013468017578125,
  0.00172119140625, 0.0021756591796875, 0.0027232666015625, 0.0033880615234375, 0.004206787109375, 0.0052380371093750005,
  0.006586181640625, 0.008400146484375001, 0.010904296875, 0.0144892578125, 0.0196798095703125, 0.049684204101562504,
  0.0886883544921875, 0.11185363769531251, 0.134164306640625, 0.137352294921875, 0.1160369873046875, 0.08516308593750001,
  0.0539765625, 0.014997436523437501, -0.015882568359375, -0.0387554931640625, -0.06125732421875, -0.0745780029296875, -0.07479357910156251, -0.0725338134765625, -0.0418538818359375, 0.08582861328125001, 0.397717529296875, 0.8136408691406251,
  1.2295617980957032, 0.9944150390625001, 0.2824605712890625, -0.38949267578125, -0.597251220703125, -0.425675537109375, -0.1537947998046875, -0.0500914306640625, -0.0111041259765625, 0.0027451171875, 0.0071739501953125, 0.008443359375,
  0.0094327392578125, 0.012530517578125, 0.0176046142578125, 0.0300162353515625, 0.0433489990234375, 0.056962646484375004,
  0.0704832763671875, 0.0770511474609375, 0.0898175048828125, 0.10311853027343751, 0.117046142578125, 0.1312630615234375,
  0.1529300537109375, 0.167607177734375, 0.1899068603515625, 0.2124422607421875, 0.235044677734375, 0.2575535888671875,
  0.2724073486328125, 0.286978271484375, 0.3007579345703125, 0.3067425537109375, 0.3106370849609375, 0.303756103515625,
  0.2897236328125, 0.25916931152343753, 0.2200599365234375, 0.1728209228515625, 0.133416259765625, 0.086224853515625,
  0.05493408203125, 0.02409423828125, 0.00922607421875, -0.0043409423828125, -0.0097349853515625, -0.013127685546875, -0.01423095703125, -0.013834716796875, -0.012556030273437501, -0.010675048828125, -0.00835888671875, -0.0057305908203125, -0.0000562744140625
];

如何确保下面显示上述数据而没有任何间隔，（但是当然需要一个显示趋势的慢动画 - 类似于示例）

Highcharts.chart('container', {
  chart: {
    type: 'spline',
    animation: Highcharts.svg, // don't animate in old IE
    marginRight: 10,
    events: {
      load: function() {
        // set up the updating of the chart each second
        var series = this.series[0];
        setInterval(function() {
          var x = (new Date()).getTime(), // current time
            y = Math.random();
          series.addPoint([x, y], true, true);
        }, 1000);
      }
    }
  },
  series: [{
    name: 'Real-time data',
    data: (function() {
      return _data;
    }())
  }]
});

Answer 1

请注意，动画和图表重绘（在您的示例中每次addPoint都会发生）需要一些时间。如果它们碰巧很快就会由于未完成的动画而完全混乱：http://jsfiddle.net/BlackLabel/6thpx7rL/

  load: function() {
    var series = this.series[0];
    setInterval(function() {
      series.addPoint(Math.random(), true, true);
    }, 100);
  }

此处的解决方案可能会在部分中添加点数，例如添加10个点，然后重绘：http://jsfiddle.net/BlackLabel/6thpx7rL/

  load: function() {
    var series = this.series[0];
    setInterval(function() {
      for (var i = 0; i < 10; i++) {
        series.addPoint(Math.random(), false, true);
      }
      series.chart.redraw();

    }, 1000);

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

Hightcharts线图实时数据没有间隔？

1 个答案: