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

Question

我正在处理图表和实时数据。我看到了这个例子，对我来说效果很好：

https://www.highcharts.com/docs/working-with-data/live-data

但是当第一个数据到达时，它会在图表中间绘制点：

填充数据后图形看起来没问题：

但我想对齐左边的线，即使我要画的点很少。可能吗？

Answer 1

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

顺便提一下，maxZoom is deprecated and replaced with new minRange属性。

Answer 2

如果你想保持 maxZoom（实际上是 minRange）属性，你需要在第一个点的添加上设置轴最小值，当你开始移动点时 - 你应该重置最小值，所以图表将是能够改变它的极端。

      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/

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

Highcharts with live data: align chart on left side

javascript

charts

highcharts

highstock