与Highstock显示缺失数据的差距 [英] Show gap of missing data with Highstock

问题描述

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

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

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

使用 gapSize 选项不起作用，因为它不允许指定'大小'作为一个时间函数的差距。

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

顺便说一句，除此之外，情节的作品很棒。

>这里有一个稍微不干净的方式来操作 gapSize 来工作，这样它的值就是创建间隙所需的毫秒数。

 （函数（H）{
 //包装getSegments以根据时间（毫秒）更改gapSize功能性工作
 H.wrap（H .Series.prototype，'getSegments'，函数（继续）{
 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 函数（查看源代码 a>），它基于轴的 closestPointRange 来工作。它包装了 getSegments ，将 closestPointRange 设置为 1 ，调用原始方法，然后将 closestPointRange 重置为其原始值。

使用上面的代码，您可以像这样在5分钟内完成差距：

  plotOptions：{
 line：{
 gapSize：300000 // 5分钟（以毫秒为单位）
} 
} 
  

请参阅此JSFiddle演示了解它的工作方式。

Using Highstock to chart a sorted time serie: [[timestamp, value], ...]

The datasource is sampled at irregular intervals. As result the distances between two points (in the time axis) varies.

If two adjacent points are separated for more than 5 minutes I want to show a gap in the chart.

Using the gapSize option doesn't work, because it doesn't allows to specify the 'size' of the gap as a function of time.

Showing gaps is already a part of Highstock, I just need a way to specify it as a fixed amount of time (5 minutes). Ideas?

Btw, beside that the plot works great.

解决方案

Here's a slightly unclean way to "manipulate" gapSize to work so that it's value is the amount of milliseconds required to create a gap.

(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));

This utilizes that gapSize is only used within the getSegments function (see source), and it works based on the closestPointRange of the axis. It wraps the getSegments, sets closestPointRange to 1, calls the original method and then resets closestPointRange to its original value.

With the code above you could do gaps for 5 minutes like this:

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

See this JSFiddle demonstration of how it may work.

这篇关于与Highstock显示缺失数据的差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！