javascript - 使用 Highstock 显示缺失数据的差距

Question

使用 Highstock 绘制排序的时间序列图:[[timestamp, value], ...]

数据源以不规则的间隔进行采样。结果，两点之间的距离(在时间轴上)发生变化。

如果两个相邻点分开超过 5 分钟，我想在图表中显示一个间隙。

使用 gapSize 选项不起作用，因为它不允许将间隙的“大小”指定为时间的函数。

显示差距已经是 Highstock 的一部分，我只需要一种将其指定为固定时间量(5 分钟)的方法。想法？

顺便说一句，除此之外，情节还不错。

Answer 1

这里有一个稍微不干净的方法来“操纵”gapSize 来工作，因此它的值是创建一个间隙所需的毫秒数。

(function (H) {
    // Wrap getSegments to change gapSize functionality to work based on time (milliseconds)
    H.wrap(H.Series.prototype, 'getSegments', function (proceed) {
        var cPR = this.xAxis.closestPointRange;
        this.xAxis.closestPointRange = 1;

        proceed.apply(this, Array.prototype.slice.call(arguments, 1));

        this.xAxis.closestPointRange = cPR;
    });
}(Highcharts));

这利用了 gapSize 仅在 getSegments 函数 ( see source ) 中使用，并且它基于 closestPointRange 的轴。它包装了 getSegments，将 closestPointRange 设置为 1，调用原始方法然后将 closestPointRange 重置为其原始值.

使用上面的代码，您可以像这样间隔 5 分钟:

plotOptions: {
    line: {
        gapSize: 300000 // 5 minutes in milliseconds
    }
}

参见 this JSFiddle demonstration它是如何工作的。