高图表实时多系列

Question

我在让实时图表工作时遇到问题。数据将实时到达，没有历史数据可以开始。我希望能够在图表窗口中显示过去 10 分钟，因为随着数据的进入，时间会随着图表的滴答作响。每个序列的数据将在随机时间到达。我已经完成了这个jsFiddle。

如何显示过去 10 分钟并勾选（目前仅显示最后一个点/单个数据？

实时图表 jsFiddle

    $(document).ready(function() {
  Highcharts.setOptions({
    global: {
      useUTC: false
    }
  });
  Highcharts.chart('container', {
    chart: {
      type: 'spline',
      animation: Highcharts.svg, // don't animate in old IE
      marginRight: 10,
      events: {
        load: function() {
          var series1 = this.addSeries({
            name: "Random 1",
            data: [[(new Date()).getTime(), 5000]]
          });
          var series2 = this.addSeries({
            name: "Random 2",
            data: [[(new Date()).getTime(), 5000]]
          });
          (function loop() {
            var rand = Math.round(Math.random() * 100) + 500;
            setTimeout(function() {
              var x = (new Date()).getTime();
              var y1 = 5000 + Math.round(Math.random() * 100);
              var y2 = 5000 + Math.round(Math.random() * 100);
              //console.log(x + ', ' + y);
              series1.addPoint([x, y1], true, true);
              series2.addPoint([x, y2], true, true);
              loop();
            }, rand);
          }());
        }
      }
    },
    title: {
      text: 'Live random data'
    },
    xAxis: {
      type: 'datetime',
      tickPixelInterval: 150
    },
    yAxis: {
      title: {
        text: 'Value'
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    tooltip: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    exporting: {
      enabled: false
    }
  });
});

Answer 1

您可以使用

setExtremes函数而不是addPoint中的shift选项。这行代码：

xAxis.setExtremes(Math.max(series1.points[0].x, x - 10 * 1000 /*10s*/));

将导致以下xAxis行为：

如果第一个序列的第一个点在过去 10 秒内具有x值（我使用秒而不是分钟来更快地看到效果），那么它就变成了低极值。否则，它将应用最新点的 x 值减少 10 秒作为低极值。

现场工作示例：http://jsfiddle.net/kkulig/66kyh13k/

请注意，我在两个addPoint调用中都禁用了重绘。重绘发生在setExtremes上，之前无需执行重绘。

接口参考：

• http://api.highcharts.com/class-reference/Highcharts.Series.html#addPoint
• http://api.highcharts.com/class-reference/Highcharts.Axis.html#setExtremes