Question

我正在使用Highstock（v4.2.3）在StockChart中显示具有多个不同Y轴的数据，所有这些都在X轴上与时间作图。数据中存在空白，我想描绘这些空白，但是当我打开gapSize（除了零之外的任何值）时，有一个奇怪的怪癖导致线渲染问题 - 当使用导航器放大时在某些日期范围（不是全部），在某些情况下（我的模式尚未辨别）图表无法在整个x轴上完全渲染线。

此annotated screenshot描述了这个问题。

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

plotOptions: {
    series: {gapSize:2}
}

有什么想法吗？

Answer 1

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

您可以在我们的API中阅读： http://api.highcharts.com/highstock#plotOptions.line.gapSize

间隙大小为5意味着如果两点之间的距离是这个图表将是两个最接近点的五倍以上被打破

据我所知，您拥有的数据存在随机间隙，因此您永远不会知道两个最近点之间的距离是多少。例如，如果您每隔一小时会有数据，则两个最近点之间的距离将为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 gapize导致线渲染问题

1 个答案: