javascript - HighStock:导航器触及右边界时图表损坏

我正在开发一个Web应用程序，该应用程序可以处理和显示来自某些设备的大量实时数据。为了可视化数据，我决定使用HighStock。在大多数数据上似乎效果很好：



但是，当底部导航器触及右边界时，图片将变得完全不同：



时间线几乎相同，但是点数不同，垂直比例也不同……这是怎么回事？如何解决？

我的代码看起来像这样：

const ch1 = Highcharts.stockChart('chart1', {
    rangeSelector: {
        selected: 1,
        inputEnabled: false,
        buttonTheme: {visibility: 'hidden'},
        labelStyle: {visibility: 'hidden'},
    },
    title: {
        text: 'Metrics',
    },
    series: [{
        name: 'Sensor 1', data: [],
    }, {
        name: 'Sensor 2', data: [],
    }, {
        name: 'Sensor 3', data: [],
    }]
});

// a,b,c gets values from the server
// They are arrays of pairs of timestamp & value
ch1.series[0].setData(a);
ch1.series[1].setData(b);
ch1.series[2].setData(c);
// tm_min & tm_max are dynamically calculated using the data
ch1.xAxis[0].setExtremes(tm_min, tm_max);

更新：Here is an example用我2％的数据–尝试执行与上图相同的操作。

最佳答案

我找到了解决方案。此问题是由您的数据和Highcc中默认启用的xAxis.ordinal引起的。您的数据在图表的右侧有许多空点，并且由于顺序关系，没有显示空白区域，但dataGrouping对数据分组的方式有所不同。

在此处https://jsfiddle.net/BlackLabel/x1tgqbw6/（禁用序数）中检查此内容：

  xAxis: {
    ordinal: true
  }

因此，解决方案是禁用xAxis.ordinal或生成没有空点的数据：


https://jsfiddle.net/BlackLabel/ex054oy8/


API参考：


https://api.highcharts.com/highstock/xAxis.ordinal