带有实时数据的Highcharts：左侧对齐图表

Question

我正在使用highcharts和实时数据。我看到了这个例子，它对我来说很好用：

'stable'

但是当第一个数据到达时，它会绘制图表中间的点： https://www.highcharts.com/docs/working-with-data/live-data

当数据填充数据时，图表看起来不错：

但是我想对齐左边的那条线，即使我有几点要画。有可能吗？

Answer 1

此处的问题出现在maxZoom对象的xAxis属性中。使用它，您可以指定最小范围xAxis，maxZoom设置为20000。要将点对齐到左侧，您只需从配置中删除此属性即可。这是我对这个小提琴的编辑版本：https://jsfiddle.net/arcquim/y9eaw1rf/13/。

顺便说一下，我们已弃用maxZoom并将其替换为新的minRange属性。

Answer 2

如果你想保持maxZoom（实际上是minRange）属性，你需要在第一个点的加法时设置轴min，当你开始换点时 - 你应该重置min，这样图表就能改变它的极值。

      load: function() {

    // set up the updating of the chart each second
    var chart = this;
    var series = this.series[0];
    var minSet = false;
    var extremesReset = false;

    setInterval(function() {
      var x = (new Date()).getTime(), // current time
        y = Math.round(Math.random() * 100);

      if (!minSet) {
        chart.xAxis[0].update({
          min: x
        }, false);
        minSet = true;
      }

      if (series.data.length > 20 && !extremesReset) {
        chart.xAxis[0].update({
          min: null,
        }, false)
        extremesReset = true;
      }

      series.addPoint([x, y], true, series.data.length > 20, series.data.length);

    }, 1000);
  }

示例：http://jsfiddle.net/xbrwqk46/