Highcharts solidgauge mit grün/gelb/rot gradient

Question

Ich würde gerne wissen, ob es möglich ist, eine Steigung zu haben, die mit grün auf der linken Seite beginnt (0 Wert), in der Mitte gelb wird und dann in rot verschwindet rechte Seite des Diagramms "solidGauge".

habe ich versucht, eine Konfiguration in der yAchse aber sie tun nicht, was ich will:

  yAxis: { 
       plotBands: [{ 
        color: { 
         linearGradient: [300, 300, 0, 0], 
         stops: [ 
          [0, 'rgb(255, 255, 255)'], 
          [1, 'rgb(150, 200, 155)'] 
         ] 
        }, 
       from: 0, 
       to: 100 
       }], 
      }, 

  yAxis: { 
        minColor:'#55BF3B', 
        maxColor:'#DF5353', 
      }, 

  yAxis: { 
       minColor: gaugeValue >= 80 ? '#FF0000' : (gaugeValue >= 60 ? '#FFFF00' : '#00FF00'), 
       maxColor: gaugeValue >= 80 ? '#FF0000' : (gaugeValue >= 60 ? '#FFFF00' : '#00FF00'), 
      } 

  yAxis: { 
       stops: [ 
        [0.1, '#55BF3B'], // green 
        [0.5, '#DDDF0D'], // yellow 
        [0.9, '#DF5353'] // red 
       ], 
      }, 

Ok ich weiß, dass Bilder unterschiedliche Farben haben, weil ich anders Hex-Wert verwendet, btw das Ergebnis ist immer das gleiche: eine Farbe (basierend auf dem gaugeValue).

Ich möchte, dass, wenn mein Wert 90% ist, ich Gradienten grün bis gelb bis rot sehen kann. Etwas wie folgt aus:

Jeder Vorschlag ist willkommen.

Dank

Answer 1

Sie müssen Farbe als Gradient für Punkt setzen, nicht für die Achse. Zum Beispiel: http://jsfiddle.net/n9gfeor2/

series: [{ 
    name: 'Speed', 
    data: [{ 
    color: { 
     linearGradient: [0, 0, 300, 0], 
     stops: [ 
     [0.1, '#55BF3B'], // green 
     [0.5, '#DDDF0D'], // yellow 
     [0.9, '#DF5353'] // red 
     ] 
    }, 
    y: 80 
    }] 
}] 

Answer 2

Dies könnte die Antwort sein: Highchart's gauge with gradient plotband

color: { 
       linearGradient: [300, 300, 0, 0], 
       stops: [ 
        [0, 'rgb(255, 255, 255)'], 
        [1, 'rgb(150, 200, 155)'] 
       ]