Highstock間距差異導致線渲染問題

我正在使用Highstock（v4.2.3）在具有多個不同Y軸的StockChart中呈現數據，所有數據均在X軸上對時間進行繪製。數據中有空白，我想描述這些空白，但是當我打開gapSize（使用除零以外的任何值）時，會出現一個奇怪的怪癖，導致線渲染問題 - 使用導航器放大時在某些日期範圍（並非全部），在某些情況下（其模式我還沒有辨別），圖表無法完全呈現整個x軸上的線條。Highstock間距差異導致線渲染問題

這個annotated screenshot描述了這個問題。

當我關閉gapSize（或明確地將其設置爲零）時，此問題消失。請注意，間距本身在圖表上正確顯示（當導航到不存在線渲染問題的日期範圍時）。

plotOptions: { 
    series: {gapSize:2} 
}

任何想法？

來源

2016-02-10 Octavient

的jsfiddle您的問題： 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

您也可以通過使用包裝改變標準functionallity。在這裏，你可以閱讀一下： 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/

親切的問候。

來源

2016-02-11 14:51:22

Highstock間距差異導致線渲染問題

回答

相關問題