Javascript HighGauge：如何禁用渐变填充？

我正在尝试使用

Highcharts

new

solidgauge

插件

源代码由highchart提供

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

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);

但是，这打破了图表（我认为这是库中的一个bug）

因此，我能想到的最好办法是直接追踪内部结构：

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);

---

这是一把小提琴。

您可以设置停止，如下所示：

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

//更改停止，0和1设置相同的值
// 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);

变量showNumber=100；//你的随机数据
变量tickMaxNumber=1000；//yAxis最大值
如果（showNumber您是否在动态更新值？为什么不根据您的值在选项中设置颜色？值是动态的，因此停止颜色也是如此。但是，用户可能只希望在值超过90%时看到红色，而不希望在值接近70%时看到褐红色渐变。您的意思是动画形式颜色A到B是渐变色？因为它在动画后看起来是实心的。我想要的是，颜色在0到20之间保持绿色，之后是黄色到80，然后是红色。然而，实际上，它从深绿色变为浅绿色、黄色、金色、栗色，然后是红色。虽然这适用于静态数据，但我似乎无法使其适用于动态数据。我有setint每几秒/分钟拉一次数据并更改
chart.yAxis.maxColor=newVal>=80？'FF0000'：（newVal>=60？'ffffff00'：'00FF00'）；
似乎没有work@siddhantKumar，请参阅下面的回复。它似乎很有效，而且比我的更可取。这都是主观的。我无法为每个颜色范围创建数组。因此，您的解决方案适合我的需要。再次感谢。不确定我是如何错过这个，比我的解决方案好得多！这仍然是一个逐渐变化的渐变颜色，呵呵w我可以将其更改为分类颜色吗？我不确定您的意思。是否要在动画过程中删除颜色更改？这是Highcharts中的默认动画。您可以包装
系列。drawPoints
更改动画制作方式，但这需要一些编码。下面是一个简单的示例，说明如何删除颜色渐变：（在设置新值之后，动画开始之前，颜色现在更改为新颜色）。值0.805（161 km/h）仍然为橙色。停止可以完全相同：
// 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);