用Highstock显示缺失数据的差距

Max*_*ulo 5 javascript highcharts highstock

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

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

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

使用该gapSize选项不起作用,因为它不允许将间隙的"大小"指定为时间的函数.

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

顺便说一下,情节很好.

Hal*_*and 5

这是一种稍微不干净的“操纵”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));
Run Code Online (Sandbox Code Playgroud)

这利用gapSize仅在内部使用getSegments的功能(见源),以及它的工作原理基于所述closestPointRange轴线。它包装getSegments,设置closestPointRange1,调用原始方法,然后重置closestPointRange为其原始值。

使用上面的代码,你可以像这样做 5 分钟的间隙:

plotOptions: {
    line: {
        gapSize: 300000 // 5 minutes in milliseconds
    }
}
Run Code Online (Sandbox Code Playgroud)

请参阅此 JSFiddle 演示,了解它是如何工作的。