2014-05-08 56 views
3

我有一個Highcharts問題,其中我的兩個y軸之一的天花板沒有得到尊重。Highcharts y軸天花板不被尊重

Y軸「1」代表的百分比值,所以具有爲0的地板和爲100的天花板

Y軸「2」表示貨幣值,因此具有爲0的地板和天花板null。以便值0更改爲20

出於某種原因,y軸標籤「1」上升到150

如果我改變了相應的一系列數據,這個問題似乎消失,標籤停在100,因爲他們應該。

var dataX = [0, 67, 43, 100, 100, 80]; 
var dataY = [950, 900, 807, 650, 600, 450]; 

$(function() { 
    $('#container').highcharts({ 

     series: [{ 
      name: 'Series 1', 
      data: dataX, 
      yAxis: 0}, 
     { 
      name: 'Series 2', 
      data: dataY, 
      yAxis: 1}], 
     yAxis: [{ 
       floor: 0, 
       ceiling: 100, 
       title: { 
        text: '1' 
       }, 
      }, 
      { 
       floor: 0, 
       ceiling: null, 
       title: { 
        text: '2' 
       }, 

       opposite: true}]});}); 

http://jsfiddle.net/2bzew/2/

任何人都可以解釋爲什麼這是怎麼回事?

回答

1

你總是可以創建自己的tickPositioner,或者直接tickPositions設置:http://jsfiddle.net/2bzew/4/

見文檔和例子:

+0

看來,這是我必須走下去的路線。不幸的是,他們只是這樣做了。從根本上看,它似乎有缺陷,因爲天花板應該是天花板,其他事情應該由Highcharts組件進行調整以確保情況如此。但是,因爲這看起來並不是什麼事情,所以至少如果可以指定想要顯示的刻度數並讓其根據該刻度進行計算,而不是期望我們計算所有內容。 – aleonj

+0

只需'alignTicks'具有比任何其他選項更高的優先級,使圖表對用戶更加友好。當然,有人可能需要另一種解決方案,這就是爲什麼可以編寫特定的「tickPositioner」來更好地控制圖表。如果你對'tickPositioner'有任何問題,請告訴我,我會幫你的。我認爲這很容易。 –

+0

感謝您的幫助。 tickPositioner對我來說遠非理想,但它看起來好像是一堆糟糕的選擇中最好的。 – aleonj

3

Highcharts API

當使用多個軸,兩個或更多個相對軸的蜱將自動通過添加對齊蜱於軸線或與該至少蜱軸。這可以通過將alignTicks設置爲false來防止。如果網格線看起來雜亂,通過將gridLineWidth設置爲0來隱藏副軸是個好主意。默認爲true。

我用這些更正更新了你的小提琴。

chart: { 
     alignTicks: false 
    }, 
... 
yAxis: [{ 
      ... 
      gridLineWidth: 0, 
      ... 

http://jsfiddle.net/2bzew/3/

+0

謝謝您的回答! 然而,雖然這在某種程度上解釋了行爲,但它並不能解釋爲什麼 - 鑑於我已告知其中一個軸沒有天花板 - 它不能只使用可匹配的數字向上。 它甚至可以使用小數,如果它有可分性的困難!從根本上看,它似乎有一個問題,因爲它想要爲軸「1」(0,25,50,75,100)提供五個停止點,而爲軸「2」(400,600,800,1000)提供四個停靠點。誰告訴它,這些站點是必要的,難道它不能被告知嗎? 真的沒有其他的事情可以做到嗎? – aleonj

+0

它是默認的behvaioru,所以你需要將對齊框標記爲false,符合@Sualkcin。你也可以準備你自己的tickPositioner功能:http://api.highcharts.com/highcharts#yAxis.tickPositioner –

6

我也有類似的問題,但我發現,使用下面的解決了這個問題:

 maxPadding: 0, 
     minPadding: 0, 

這些值的默認都是0.05,這樣將被添加到您的數據,並導致highstock到使y軸大於預期。將它們歸零似乎爲我解決了這個問題。

我還建議設置下,這樣的最大值仍具有標籤:

 showLastLabel: true, 

http://jsfiddle.net/M4bVz/

+0

這也爲我解決了它。我的面積圖值在0-100範圍內,但填充從-50到150. –

+0

不適用於我 – user1143669