Wie kann ich mehrere Y-Achsen in Highcharts zwingen, einen gemeinsamen Nullpunkt zu haben?

Question

Siehe hierzu JSFiddle. Wie bekomme ich die Y-Achse Null zum Ausrichten?

Answer 1

Die kurze Antwort ist: Sie können nicht.

Sie können die Achsenskalierung, das Auffüllen und das Ankreuzen von Positionen und dergleichen optimieren und erhalten möglicherweise, was Sie wollen, aber es gibt keine Einstellung, um dies zu erreichen.

Es gibt eine Feature-Anfrage aber, dass Sie Ihre Stimmen und/oder Kommentare hinzufügen können:

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

EDIT: OTOH, ich habe zu erwähnen, dass Dual-Achsen-Diagramme wie diese sind am häufigsten eine sehr schlechte Möglichkeit, die Daten anzuzeigen, und fordert den Benutzer auf, Vergleiche durchzuführen, die nicht gültig sind.

Während die meisten Leute immer versuchen, alles in ein Diagramm zu stellen, sind mehrere Diagramme oft die bessere Lösung.

FWIW

Answer 2

Der einfachste Weg ist es, nur die gleiche min/max für jede Achse. Es wäre ziemlich einfach, ein gutes Min/Max zu bestimmen, basierend auf den Daten vor dem Plot-Aufruf (kombiniere die Arrays, nimm die Min/Max-Runden runter/bis zum nächsten int, wäre mein Ansatz).

pretend this is code so I can link to jsFiddle 

fiddle aktualisiert.

Answer 3

Sie können Min-/Max-Wert für die erste yAchse gesetzt und linkedTo zur zweiten Achse verwenden, aber ich bin mir nicht sicher, ob Sie diesen Effekt erwarten:

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

Eine einfache Abhilfe, bis diese Die Funktion wird hinzugefügt, um sicherzustellen, dass das Verhältnis von max/min für beide Achsen gleich ist. Zum Beispiel ist das Minimum und das Maximum für die primäre y-Achse beispielsweise -20 und 40, dann ist das maximale/minimale Verhältnis gleich -2. Nun sagen wir, dass wir einen maximalen Wert für die sekundäre y-Achse von 25 haben. Wenn wir die min für diese Achse auf 25/-2 (= -12,5) setzen, wird die y = 0 Linie für die zwei Achsen ausgerichtet.

Würde viel schöner sein, eine Flagge zu haben, dies jedoch automatisch eingestellt werden soll ;-)

EDIT: Manche Dinge wie unten für mich OK gearbeitet:

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

Sie können es leicht durch die folgende unter Code-

brauchen Sie nur zu finden, welchen Punkt entgegengesetzter y-Achse Null der ersten y-Achse entspricht und die min von opp y-Achse (dieser Punkt * -1) gesetzt

In mein Fall yaxis [1] bildet den Haupt yaxis und yaxis [0] bildet das Gegenteil 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

Ich weiß, dass es 2 Jahre gewesen ist. Allerdings habe ich eine bessere Lösung gefunden, als die Lösung, die in früheren Antworten gegeben wurde. Meine Lösung verwendet immer noch setExtremes, um min, max für yAxis zu setzen, aber mit einer besseren Ausnahmebehandlung, die für show() und hide() beliebige Plots extrem gut ist. Lösung: link
Github: link