Highcharts：在X軸下顯示第二個系列

我試圖在時間序列的圖表的X軸下將每小時狀態繪製爲（可點擊的）彩色框。Highcharts：在X軸下顯示第二個系列

一個想法是在X軸本身和X軸標籤之間繪製第二個系列（帶有自己的Y軸）。

但是，甚至有可能讓2個Y軸從一個共同的X軸向相反的方向走？

^
    | 
___|_____________> 
      | 
      | 
      V

這是我走到這一步： http://jsfiddle.net/7q15t2fh/4/

來源

2016-03-01 marcpmichel

有很多潛在的解決方案。 1）只使用相同的y軸，並使用負值; 2）只需將它自己的圖表對齊到原始圖的下方，這樣您就不必擔心根據常規數據選擇框的大小3）是的，您可以堆疊y軸 - 查看「頂部」和「偏移量「屬性。 – jlbriggs

你的意思是這樣的：http://jsfiddle.net/g4bwgj8n/或http://jsfiddle.net/kzqdovrx/？ –

我喜歡它：http://jsfiddle.net/jlbriggs/7q15t2fh/7/ – jlbriggs

下面是使用兩個堆疊y軸版本：

yAxis: [{ 
     height:200, 
     title: { text: 'Y Axis 0', rotation:0 }, 
     offset:0 
    },{ 
     top:275, 
     height:30, 
     title: { text: 'Y Axis 1', rotation:0 }, 
     offset:0, 
     min:0, 
     max:1 
    }]

它看起來像「頂」屬性沒有列出在API中。

您需要根據圖表大小，頂部和底部邊距以及所需的間距和塊大小來設置每個y軸的高度和第二個y軸的頂部。

例子：

http://jsfiddle.net/jlbriggs/u4db8yx7/

來源

2016-03-01 17:20:43 jlbriggs

不錯！感謝這個例子。是的，頂部是無證的。您的解決方案看起來非常乾淨，但硬編碼大小可能會成爲問題... – marcpmichel

會導致硬編碼大小的問題會發生什麼變化？如果你知道你想要可點擊的框有多高，你應該能夠動態地確定其餘部分 – jlbriggs

你是對的，重新計算調整大小事件的軸高度和位置可以解決這個問題。另一個主要工作的解決方案涉及使用％作爲高度和頂級屬性。 – marcpmichel

Highcharts：在X軸下顯示第二個系列

回答

相關問題