Gauge Graph mit Farbverlauf grün-gelb-rot

Question

Ich versuche ein Gauge-Diagramm zu erstellen, das einen Gradienten auf der Grundlage des Prozentsatzes hat, der voll ist, ähnlich wie unten abgebildet. Die nächste, die ich verwalten könnte, ist die Anzeige aller Farbverläufe unabhängig vom Wert - wie here.

var x = 80; // Change x to see effects. 

Hat es jemand geschafft, einen Gradienten basierend auf Wert zu bekommen?

Answer 1

können Sie verwenden yAchse stoppt und kleinen Trick, um Ihre Grafik Hinzufügen Gradienten. Sie können zum Beispiel Punkte zu Ihrem Messgerät hinzufügen (innerhalb Ihrer Load-Ereignis-Callback-Funktion), wobei die Werte von Ihrem normalen y-Wert auf 0 sinken. Dadurch erhalten Sie die Möglichkeit, etwas Ähnliches wie Gradienten mit mehreren Punkten zu haben.

function(chart) { 
    var y = this.series[0].data[0].y; 
    for (var i = y; i >= 0; i = i - 1) { 
     chart.addSeries({ 
     data: [i], 
     stickyTracking: false, 
     enableMouseTracking: false 
     }, false) 
    } 
    chart.redraw(); 
    } 

Hier sehen Sie ein Beispiel sehen, wie es funktionieren kann: http://jsfiddle.net/64mfcg3v/6/

Mit freundlichen Grüßen,