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

Question

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

数据源不定期采样。结果，两点之间的距离（在时间轴上）发生变化。

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

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

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

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

Answer 1

这里有一个稍微不干净的方法 "manipulate" 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 它的工作原理。

Answer 2

did not work for me as long as getSegments is not part of highstock source code anymore to calculate that gap. Anyway, you can find an approximation to solve the problem combining 之前的回答是这样的：

(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
  }
}

Answer 3

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

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

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

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

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

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

Show gap of missing data with Highstock

javascript

highcharts

highstock