使用 Highstock 显示缺失数据的差距答案

【问题标题】：Show gap of missing data with Highstock使用 Highstock 显示缺失数据的差距
【发布时间】：2022-02-23 00:53:31
【问题描述】：

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

以不规则的间隔对数据源进行采样。因此，两点之间的距离（在时间轴上）会发生变化。

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

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

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

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

【问题讨论】：

标签： javascript highcharts highstock

【解决方案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 了解它的工作原理。

【讨论】：

【解决方案2】：

Halvor Strand function wrapper 对我不起作用，只要 getSegments 不再是 highstock source code 的一部分来计算该差距。无论如何，您可以找到一个近似值来解决结合this other topic 和之前的答案的问题，如下所示：

(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 设置为所需的大小（以 ms 为单位），就像 Halvor 所说的：

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

【讨论】：

【解决方案3】：

万一有人遇到这种情况并花费数小时试图弄清楚为什么 gapSize 不能像我一样工作。确保您的时间序列数据已排序，只有这样差距才会出现在图表中。

我遇到的另一个问题是我的数据系列是这种格式

[
      {x: 1643967900000, y: 72},
      {x: 1643967600000, y: 72},
      {x: 1643967300000, y: 72}
]

但是这似乎不适用于 gapSize，需要采用以下格式

[
      [1643967900000, 72],
      [1643967600000, 91],
      [1643967300000, 241]
]

【讨论】：