带有绿色/黄色/红色渐变的 Highcharts solidgauge

Question

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

我在 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's gauge with gradient plotband

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