W jaki sposób można wymusić wiele osi Y w Highcharts, aby mieć wspólne zero

Question

Zobacz ten JSFiddle. Jak uzyskać wyrównanie osi Y?

Answer 1

Krótka odpowiedź brzmi: nie możesz.

Możesz zmieniać ustawienia skalowania osi, wypełniania i zaznaczania i tym podobne, a także uzyskać to, czego potrzebujesz, ale nie ma ustawień, aby to osiągnąć.

Jest prośba cecha jednak, że można dodać głosy i/lub komentarze do:

http://highcharts.uservoice.com/forums/55896-general/suggestions/2554384-multiple-axis-alignment-control

EDIT: OTOH, muszę wspomnieć, że podwójne wykresy oś takie jak ten są najczęściej bardzo słaby sposób pokazywania danych i zachęca użytkownika do dokonywania porównań, które nie są prawidłowe.

Podczas gdy większość ludzi zawsze stara się umieścić wszystko w jednym wykresie, wiele map jest często lepszym rozwiązaniem.

FWIW

Answer 2

Najprostszym sposobem jest po prostu zapewnić ten sam min/max dla każdej osi. Byłoby całkiem proste, aby określić dobre min/maksimum w oparciu o dane przed wywołaniem wykresu (połączyć tablice, wziąć rundę min/max w dół/w górę do najbliższej int, byłoby moim podejściem).

pretend this is code so I can link to jsFiddle 

Zaktualizowane fiddle.

Answer 3

można ustawić min/max wartości dla pierwszego yAxis i używać linkedTo do drugiej osi, ale nie jestem pewien, czy można oczekiwać tego efektu:

http://jsfiddle.net/qkDXv/2/

yAxis: [{ // Primary yAxis 
      labels: { 
       format: '{value}°C', 
       style: { 
        color: '#89A54E' 
       } 
      }, 
      title: { 
       text: 'Temperature', 
       style: { 
        color: '#89A54E' 
       } 
      }, 
      min:-250, 
      max:50 
      //linkedTo:1 
     }, { // Secondary yAxis 
      title: { 
       text: 'Rainfall', 
       style: { 
        color: '#4572A7' 
       } 
      }, 
      labels: { 
       format: '{value} mm', 
       style: { 
        color: '#4572A7' 
       } 
      }, 
      opposite: true, 
      linkedTo:0 
     }], 

Answer 4

Łatwym obejście dopóki funkcja jest dodawana, aby upewnić się, że stosunek max/min jest taki sam dla obu osi. Na przykład min i maksimum dla pierwotnej osi y wynoszą na przykład -20 i 40, a stosunek max/min wynosi -2. Teraz powiedzmy, że mamy wartość maksymalną dla drugiej osi y 25. Jeśli ustawimy min dla tej osi na 25/-2 (= -12,5), wówczas linia y = 0 będzie wyrównana dla dwóch osi.

byłby znacznie ładniejszy mieć flagę ustawić to automatycznie chociaż ;-)

EDIT: Niektóre rzeczy jak poniżej działało OK dla mnie:

yAxis0Extremes = chart.yAxis[0].getExtremes(); 
yAxisMaxMinRatio = yAxis0Extremes.max/yAxis0Extremes.min; 
yAxis1Extremes = chart.yAxis[1].getExtremes(); 
yAxis1Min = (yAxis1Extremes.max/yAxisMaxMinRatio).toFixed(0); 
chart.yAxis[1].setExtremes(yAxis1Min, yAxis1Extremes.max); 

Answer 5

można to zrobić łatwo, wykonując poniżej Code

wystarczy, aby znaleźć punkt, który odpowiada przeciwnej oś y zero pierwszej osi y i ustawić min oPP osi y do tego punktu * (-1)

W moja sprawa yAxis [1] stanowi główny yAxis i yAxis [0] tworzy odwrotny yAxis

}, function(chart) { // on complete 
     var factor = chart.yAxis[1].min/chart.yAxis[1].tickInterval 
     var tick = chart.yAxis[0].tickInterval; 
     var _min = chart.yAxis[0].tickInterval * factor 
     chart.yAxis[0].update({ min: _min }); 
     chart.yAxis[0].update({ tickInterval: tick }); 



    }); 

Answer 6

wiem, że to było dwa lata. Jednak znalazłem lepsze rozwiązanie w porównaniu do istniejącego rozwiązania, które podano w poprzednich odpowiedziach. Moje rozwiązanie nadal używa setExtremes do ustawiania min, max dla yAxis, ale z lepszą obsługą wyjątków, które są wyjątkowo dobre dla show() i hide() dowolnego wykresu. Rozwiązanie: link
Github: link