用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函数（ 见源 ），以及它的工作原理基于所述closestPointRange轴线。 它包装getSegments ，设置closestPointRange到1 ，调用原始的方法，然后重置closestPointRange到其原始值。

使用上面的代码，您可以像这样做5分钟的间隙：

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

请参阅此JSFiddle演示如何工作。

Answer 2

Halvor Strand函数包装器对我来说不起作用，只要getSegments不再是highstock 源代码的一部分来计算这个差距。 无论如何，你可以找到一个近似来解决问题，结合这个其他主题和前面的答案，如下所示：

(function(H) {
  H.wrap(H.Series.prototype, 'gappedPath', function(proceed) {
    var gapSize = this.options.gapSize,
      xAxis = this.xAxis,
      points = this.points.slice(),
      i = points.length - 1;

    if (gapSize && i > 0) { // #5008

      while (i--) {
        if (points[i + 1].x - points[i].x > gapSize) { // gapSize redefinition to be the real threshold instead of using this.closestPointRange * gapSize
          points.splice( // insert after this one
            i + 1,
            0, {
              isNull: true
            }
          );
        }
      }
    }
    return this.getGraphPath(points);
  });
}(Highcharts))

将plotOptions中的gapSize设置为所需的大小（以毫秒为单位），如Halvor所说：

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