Highcharts solidgauge具有绿色/黄色/红色渐变

我想知道是否有可能在左侧以绿色开始的渐变（0值），在中间渐渐变为黄色，然后在“solidGauge”图表的右侧渐渐变为红色。

我在yAxis中尝试了一些配置，但是他们没有做我想要的：

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 ], }, 

好吧我知道图像有不同的颜色，因为我使用了不同的Hex值，顺便说一句，结果总是一样的：纯色（基于gaugeValue）。

我想如果我的价值是90％，我可以看到渐变绿色到黄色到红色。 像这样的东西：

任何建议都是受欢迎的。

谢谢

Answer 1

您需要将点的颜色设置为渐变，而不是轴。 例如： 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

这可能就是答案： Highchart的测量仪具有梯度绘图带

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