Highcharts solidgauge：如何禁用渐变填充？

我正在尝试使用Highcharts new solidgauge插件。

http://jsfiddle.net/4zVU8/2/

由highchart提供的源代码

仪表接受三个STEP参数，以根据数据显示不同的颜色。 问题是它以渐变显示颜色，我想要

1） 绿色高达20％

2） 黄色高达80％和

3）一旦值超过80％，仪表颜色应为红色 。

可能吗？

要获得纯色，请将minColor和maxColor 选项设置为相同的值。 要根据值设置颜色，只需在选项中进行比较： 

 var guageValue = 60; var gaugeOptions = { ... yAxis: { minColor: guageValue >= 80 ? '#FF0000' : (guageValue >= 60 ? '#FFFF00' : '#00FF00'), maxColor: guageValue >= 80 ? '#FF0000' : (guageValue >= 60 ? '#FFFF00' : '#00FF00'), lineWidth: 0, ....

评论的编辑

好吧，根据API动态执行它应该很简单： 

 var chart = Highcharts.charts[0]; var point = chart.series[0].points[0]; var color = newGuageValue >= 80 ? '#FF0000' : (newGuageValue >= 60 ? '#FFFF00' : '#00FF00'); chart.yAxis[0].update({minColor:color, maxColor:color}); point.update(newGuageValue);

但是，这打破了图表（我相信它是图书馆中的一个错误）。

所以我能想到的最好的就是直接追踪内部： 

 var chart = Highcharts.charts[0]; var point = chart.series[0].points[0]; var color = newGuageValue >= 80 ? [255,0,0,1] : (newGuageValue >= 60 ? [255,255,0,1] : [0,255,0,1]); chart.yAxis[0].stops[0].color.rgba = color; chart.yAxis[0].stops[1].color.rgba = color; point.update(newGuageValue);

这是一个小提琴演示 。

您可以设置止损，如下所示： http ： //jsfiddle.net/4zVU8/5/ 

  stops: [ [0.0, '#55BF3B'], // green [0.2, '#55BF3B'], // green [0.21, '#DDDF0D'], // yellow [0.80, '#DDDF0D'], // yellow [0.81, '#DF5353'], // red [1, '#DF5353'] // red ]

因此，颜色结束后正确设置新的颜色。 

 // change your stops ,0 and 1 set the same value var showNumber = 100; // your random data var tickMaxNumber = 1000; // The yAxis max value if(showNumber <= tickMaxNumber*0.2){ gaugeOptions.yAxis[0].stops = [ // red [0, '#EE4B4B'], [1, '#EE4B4B'] ]; }else if(showNumber <= tickMaxNumber*0.8){ gaugeOptions.yAxis[0].stops = [ // yellow [0, '#FFC063'], [1, '#FFC063'] ]; }else{ gaugeOptions.yAxis[0].stops = [ // green [0, '#40A276'], [1, '#40A276'] ]; } $('#container-speed').highcharts(gaugeOptions);
Interesting Posts