Wie implementiere ich Volltonfarben für Zonengrenzen in Highcharts?

Question

Ich habe ein Liniendiagramm in Highcharts mit einer anderen Farbe eingerichtet, um Werte anzuzeigen, die inakzeptabel hohe Werte erreichen (95% oder mehr).

Um dies zu erreichen, habe ich Zonen zu meiner Serie Konfiguration wie folgt:

zones: [{ 
    value: 95, 
    color: 'lightblue' 
}, { 
    color: 'red' 
}] 

Eine blaue Zone bis zu 95 Werte umfasst, und eine andere rote Zone zeigt höhere Werte.

Es scheint, dass wenn die Werte nahe 95 kommen, die Linie rot wird, was bedeutet, dass in einem Diagramm, wo die Linie sich nähert, aber nie 95% trifft, die Linie (teilweise) rot ist.

Ich möchte dies verhindern, und nur die Linie rot, wenn der Wert 95% erreicht. Gibt es eine Möglichkeit, dies zu tun?

Here ist eine Demo, die das Problem zeigt. Vielen Dank!

Answer 1

Dies ist eine knifflige Frage.

Zunächst einmal sieht Ihre Daten wie eine gerade Linie und sehr Nähe von . In diesen Fällen ist eine Farbüberlappung mit der Verwendung der zones Eigenschaft unvermeidlich.

Aber es gibt einen Trick, den Sie versuchen können;

Highcharts hat ein Plug-in namens MultiColor, das Sie finden können here.

Mit diesem Plugin können Sie mehrfarbige Liniendiagramme erstellen;

Was können wir für Ihr Diagramm tun ist, Daten zu ändern, um zu umfassen Farben wie,

data: [94.0, 94.1, 94.2, 94.3, 94.4, 94.5, 94.6, 94.7, 94.8, 94.9, 94.8, 94.7, {y: 95.0, segmentColor: 'red'},{y: 95.4, segmentColor: 'red'}, {y: 96.1, segmentColor: 'red'}] 

Und diese Veränderung wird uns angefordert Ergebnis:

Live-Beispiel: jsFiddle.