Javascript 显示缺失数据与高库存的差距

使用Highstock绘制已排序的时间序列：

[[timestamp，value]，…]

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

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

使用

gapSize

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

显示差距已经是Highstock的一部分，我只需要一种方法将其指定为固定的时间量（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));

这利用了

gapSize

仅在

getSegments

函数（）中使用，它基于轴的

closestPointRange

工作。它包装

getSegments

，将

closestPointRange

设置为

1

，调用原始方法，然后将

closestPointRange

重置为其原始值

使用上述代码，您可以在5分钟内完成以下任务：

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

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

看看它是如何工作的。

只要getSegments不再是highstock的一部分来计算缺口，我就不工作了。无论如何，你可以找到一个近似值来解决这个问题，结合前面的答案如下：

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

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