Highcharts solidgauge与绿色/黄色/红色渐变 [英] Highcharts solidgauge with green/yellow/red gradient

问题描述

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

我在yAxis上尝试了一些配置，但他们没有按照我的要求做：

  yAxis：{
 plotBands：[{
 color：{
 linearGradient：[300，300，0，0]，
 stops：[
 [0，'rgb（255,255,255）']，
 [1，'rgb（150,200,155）'] 
] 
}，
从：0，
到：100 
}]，
}，
  

  yAxis：{
 minColor：'＃55BF3B'，
 maxColor：'＃DF5353'，
}，
  

  yAxis：{
 minColor：gaugeValue> = 80？ '＃FF0000'：（gaugeValue> = 60？'＃FFFF00'：'＃00FF00'），
 maxColor：gaugeValue> = 80？ '＃FF0000'：（gaugeValue> = 60？'＃FFFF00'：'＃00FF00'），
} 
  

  yAxis：{
停止：[
 [0.1，'＃55BF3B']，//绿色
 [0.5，'＃DDDF0D']，//黄色
 [0.9，'＃DF5353'] //红色
]，
}，
  

欢迎任何建议。

谢谢

解决方案

渐变，不适用于轴。例如： http://jsfiddle.net/n9gfeor2/

 系列：[{
 name：'Speed'，
 data：[{
 color：{
 linearGradient：[0 ，0，300，0]，
停止：[
 [0.1，'＃55BF3B']，//绿色
 [0.5，'＃DDDF0D']，//黄色
 [0.9，'＃DF5353'] // red 
] 
}，
y：80 
}] 
}] 
  

I would like to know if is it possible to have a gradient that starts with green on the left (0 value), fading to yellow in the middle and then fading into red at the right side of the "solidGauge" chart.

I tried some configuration in the yAxis but they don't do what i want:

            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 I know that images have different colours because I used different Hex value, btw the result is always the same: a solid color (based on the gaugeValue).

I would like that if my value is 90% I can see gradient green to yellow to red. Something like this:

Any suggestion is welcome.

Thanks

解决方案

You need to set color for point as gradient, not for axis. For example: 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
  }]
 }]

这篇关于Highcharts solidgauge与绿色/黄色/红色渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！