Highcharts - Ausgabe mit negativen Werten beim Anzeigen mehrerer Achsen

Question

Wir versuchen, zwei Datenreihen auf demselben Diagramm anzuzeigen. Die erste Reihe (dh die Anzahl der Zitate) kann nur positive ganze Zahlen (und 0) enthalten. Die zweite Reihe (dh Verkaufswert) kann sowohl positive als auch negative Float-Werte enthalten (falls Sie sich wundern, ergeben sich die negativen Werte aus der Ausgabe von Gutschriften).

Wie auf dem angehängten Bild angezeigt, ist das Problem, dass, wenn die zweite Serie negative Werte enthält, die 0-Punkt "Basislinie" der beiden Datenreihen nicht mehr geteilt wird.

Wir haben versucht, haben die „min“ Optionen der Y-Achsen Einstellung 0, aber dann verlieren wir den Einblick auf negative Werte aus.

Wir haben auch versucht, das Minimum der ersten Serie so einzustellen, dass es dem Minimum der zweiten Serie entspricht, aber leider skaliert es die Spalten nicht sehr schön (da die Werte jeder Y-Achse vollständig aufleuchten) verschiedene Skalen, dh: 10s vs 1000s).

Wie können wir das Diagramm so konfigurieren, dass die 0-Punkt "Basislinie" geteilt wird? Mit anderen Worten, wie würden wir die blauen Spalten dazu bringen, an der gleichen Basislinie wie der grüne 0-Punkt zu beginnen?

aktualisieren

Linger Antwort ist ein Schritt in die richtige Richtung. Das Setzen der min und tickinterval für beide Achsen macht den Trick. Die Werte müssen jedoch dynamisch basierend auf variablen Daten bestimmt werden, wo ich jetzt feststecke.

Gibt es Tipps, wie diese min und tickinterval Werte bestimmt werden können, bevor ich das Diagramm erstellen?

Ich habe in der Zwischenzeit darüber nachgedacht. Die Werte der linken Achse (blau/quotiert) sind immer positiv und beginnen bei Null. Daher bestimmt die rechte Achse (grün/Verkauf) die Anzahl der Ticks, die unterhalb des Nullpunkts angezeigt werden. Da nun highcharts bestimmt automatisch die beste Skala sowohl für blau und grün, alles, was ich tun muß, ist einen Weg finden, die linken Achse Mindestwert einzustellen, wie so (den Pseudo-Code entschuldigen):

var factor = right_axis.min/right_axis.tickinterval; 

left_axis.min = factor * left.tickinterval; 

Hinweis: Ich habe gesehen, dass die Referenz-API eine setExtremes() -Methode unter Axis hat, aber dies würde erfordern, dass ich zuerst das Diagramm initialisiere und dann zurück gehe und seine linke Achse aktualisiere. Ich hoffe, dies zu tun, bevor ich das Diagramm zeichne. Vielleicht übersehe ich etwas Offensichtliches?

Danke.

Answer 1

Sie können steuern, was Sie mit einer Kombination von tickInterval und min auf der Yaxis wie in diesem jsfiddle Mock-up gezeigt bitten.

EDIT

In Ihrem Code, während in der XML-Lese müssen Sie verfolgen, was der niedrigste Wert ist und auch den höchsten Wert auf der Verkaufsseite. Entscheiden Sie dann, wie Sie diese Werte anzeigen möchten, wenn sie einen bestimmten Wert erfüllen. Danach verwenden Sie if-Anweisungen, um die Werte festzulegen. Hier sind ein paar Beispiele.

Low less than -50 and greater -90 
With High less than 400 
Primary Axis: min: -2, tickInterval: 1, 
Secondary Axis: min: -100, tickInterval: 50 

Example

Low less than -50 and greater -90 
With High greater than 400 
Primary Axis: min: -1, tickInterval: 1, 
Secondary Axis: min: min: -100, tickInterval: 100, 

Example

Um herauszufinden, was die min auf der Hauptachse sollte durch seine tickInterval Sie teilen Sie einfach die min auf der sekundären Achse sein. Dann wäre der tickInterval für die primäre Achse immer 1.