Highstock gapsize 导致线渲染问题

Question

我正在使用 Highstock (v4.2.3) 在具有许多不同 Y 轴的 StockChart 中显示数据，所有这些都根据 X 轴上的时间绘制。数据中有间隙，我想描述这些间隙，但是当我打开 gapSize（具有非零值）时，有一个奇怪的怪癖导致线渲染问题——当使用导航器放大时在某些日期范围内（并非全部），在某些情况下（我尚未辨别其模式）图表无法完全呈现横跨整个 x 轴的线。

这 annotated screenshot 描述了问题。

当我关闭 gapSize（或将其明确设置为零）时，这个问题就消失了。请注意，差距本身在图表上正确显示（当导航到不存在线条呈现问题的日期范围时）。

plotOptions: {
    series: {gapSize:2}
}

有什么想法吗？

Answer 1

jsFiddle 解决您的问题： http://jsfiddle.net/2N52H/109/

正如您在我们的 API 中所读到的： http://api.highcharts.com/highstock#plotOptions.line.gapSize

A gap size of 5 means that if the distance between two points is greater than five times that of the two closest points, the graph will be broken

据我所知，您拥有的数据具有随机间隙，因此您永远不会知道两个最近点之间的距离是多少。例如，如果您每隔一小时就有一次数据，两个最近点之间的距离将为 15 分钟，并且您的 gapSize 将设置为 2，您将只会看到最近的点。

当您使用缩放时，有时您的可见数据最近距离会发生变化，因此间隙也会发生变化。看这个例子： http://jsfiddle.net/2N52H/111/

也许您可以使用 xAxis.ordinal 参数来可视化您的差距： http://api.highcharts.com/highstock#xAxis.ordinal

您还可以使用包装器更改标准功能。在这里你可以阅读它： http://www.highcharts.com/docs/extending-highcharts/extending-highcharts

例如，您可以更改 gappedPath 函数：

(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

        // extension for ordinal breaks
        while (i--) {
          if (points[i + 1].x - points[i].x > gapSize) {
            points.splice( // insert after this one
              i + 1,
              0, {
                isNull: true
              }
            );
          }
        }
      }
      return this.getGraphPath(points);

    })
  }(Highcharts))

示例： http://jsfiddle.net/2N52H/113/

亲切的问候。

Highstock gapsize 导致线渲染问题

Highstock gapsize is causing line rendering issue

javascript

highcharts

highstock