javascript - 高库存 : chart gets broken when navigator touches right border

Question

我正在开发一个 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% 的数据 – 尝试执行与上面所示相同的操作。

Answer 1

我找到了解决方案。该问题是由您的数据和 Highstock 中默认启用的 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