如何將此Highchart系列的線條延伸至圖表區域的邊緣？

曾幾何時，有一個圖表...如何將此Highchart系列的線條延伸至圖表區域的邊緣？

這個圖表有多個系列堆疊在它自己的頂部，但是然後一個線被放置在堆積列的頂部，以表示impish下面的小盒子。 HighCharts的國王需要這條線路一直延伸到邊緣，並找不到適當的設置來做到這一點。

長老在plotOptions決定被定義爲這樣的：

plotOptions: { 
    column: { 
     animation: false, 
     stacking: 'normal', 
     pointWidth: 19 
    }, 
    line: { 
     marker: { enabled: false }, 
     step: 'center', 
     color: '#0a4d85' 
    }, 
    series: { 
     states: { hover: { enabled: false } }, 
    } 
}

宮廷小丑發現這個問題是非常有趣的，但就有可能失去他的頭，如果他不危險沒有拿出正確的答案......很快。

每個數據系列完美匹配[0 - 48]。

建議和解決方案，節省小丑將會遇到一個偉大的國王複選標記。

已解決！ JESTER LIVES !!!

由@jlbriggs建議的數據系列的填充是成功的。定義x軸的極限可輕鬆修剪掉任何多餘的數據點。

來源

2016-03-21 beauXjames

IDK如果我已經通過一個問題閱讀這麼多的樂趣 –

沒有一個設置可以做到這一點。默認情況下，這些點在類別的中心對齊。您可以將tickmarkPlacement屬性從默認值設置爲至,，但這會弄亂您的列網格。

我知道這個特定場景的最佳選擇是通過將數據點添加到行的開始和結尾，在最小x值的-0.5處以及最大值的+ 0.5 x值，分別重複你的第一個和最後一個y值。

因此，舉例來說，如果你的數據是：

data: [3,4,7,8,6,5,4,5,4,3,4]

然後，它將需要是：

data: [{x:-0.5, y: 3},3,4,7,8,6,5,4,5,4,3,4,{x:10.5, y: 4}]

您可能需要調整一些其他的選擇項，這取決於你其他圖表選項，如：

x軸的最小/最大
plotOptions - >柱 - >grouping: false
plotOptions - >柱 - >pointRange: 1

實施例：

http://jsfiddle.net/jlbriggs/1sfarksh/

來源

2016-03-21 16:13:08 jlbriggs

從一個小丑到另一個小丑值得受到攻擊......在應用這個概念時花費了很少的精力。起初我擔心數據系列有不同長度會引起一些縮放問題，但x軸上的最小/最大值只是修剪掉多餘的脂肪。感謝您分享您的解決方案。我會在上面發佈完成的照片。 – beauXjames

不知道這是否直接適用於宮廷小丑的情況，但我有同樣的邊緣問題，使用xAxis.min和xAxis.max能夠解決它在一個不太哈克的方式：

xAxis: { 
    min: 0.5, 
    max: yourColumnsArray.length - 1.5, 
    ... 
}

來源

2017-11-21 16:29:52

如何將此Highchart系列的線條延伸至圖表區域的邊緣？

回答

相關問題