2013-03-23 199 views
14

我正在構建一個數據演示,其中兩個Highcharts圖表是垂直堆疊的,旨在共享相同的x軸單位和對齊。像這樣:Highcharts中固定的y軸標籤寬度

Stacked Highcharts

注意,因爲y軸的範圍是用於兩個圖表不同,y軸標籤具有不同的寬度,因此圖表本身稍有不同的寬度打破了很好的x軸對準。

能夠固定圖表的寬度(或相反的y軸標籤)以確保兩個圖表排列起來將是非常好的。我探索了API,並直接在各種生成的元素上設置樣式,但沒有運氣。似乎有可能使用自定義標籤格式化程序來實現此目標,但庫存格式化程序(如果我沒有定義任何自定義)可以很好地用於縮寫大數字等。

關於如何修復圖表或y軸標籤寬度的想法?

+0

的形象出現在這裏失蹤。你解決了你的問題嗎?提出的解決方案是否有效?我有興趣。 – Jerome 2013-09-27 14:04:40

+0

我有類似的要求來顯示具有相同Y軸對齊的多個圖表,@TorsteinHønsi解決方案完美地工作。 – rajarshig 2017-01-18 17:37:01

回答

1

有點哈克的方式,但應該工作:

  • 組兩個X軸width,例如400px
  • set for all axis(xAxis and yAxis)right,例如, 20像素

現在y軸應該具有相同的寬度,也同樣極端等

另一個(甚至更好)的解決方案是使用兩個窗格爲Highcharts。它的工作方式與Highstock中的完全相同,請參閱示例:http://www.highcharts.com/stock/demo/candlestick-and-volume

+0

感謝您的想法! 對於hacky的方式,我不確定我會遵循 - api文檔不會顯示xAxis或yAxis的任何寬度或正確屬性。當我設置寬度:「400px」或類似的xAxis沒有繪製圖表內容。 雙窗格sln看起來好像可以工作,但需要對現有組件進行一些重構,因此非常有幫助,但理想的做法是最好的。 – qfinder 2013-03-26 16:37:14

+0

創建jsFiddle的例子,我們可以工作。它應該工作。 – 2013-03-27 00:46:15

20

如果您設置chart.marginLeft選項,它將覆蓋自動尺寸標籤,以便Y軸對齊。

1

這是一個遲到的答案,但您現在可以在同一個Highcharts對象內執行多個圖表。由於Highcharts會爲您完成所有工作,因此您不必手動嘗試強制使用此方法時的Y軸對齊。

http://www.highcharts.com/demo/combo