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

【问题标题】：Highcharts solidgauge : How can I disable gradient fill?Highcharts solidgauge：如何禁用渐变填充？
【发布时间】：2014-05-01 15:38:23
【问题描述】：

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

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

highchart 提供的源代码

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

1) 绿色颜色高达 20%

2) 黄色高达 80% 和

3) 一旦值超过 80% 仪表颜色应该是红色。

有可能吗？

【问题讨论】：

您是否在动态更新值？为什么不根据您的值在选项中设置颜色？
这些值是动态的，停止颜色也是如此。然而，用户可能只希望在值超过 90% 时看到红色，而不是在梯度接近 70% 时看到栗色。
你的意思是动画形式颜色A到B是渐变的？因为它在动画之后似乎是实心的。
我一直在寻找的是颜色从 0 到 20 保持绿色，然后是黄色到 80 和红色。然而，实际上它会从深绿色变为浅绿色、黄色、金色、栗色，然后是红色。

标签： javascript jquery highcharts gauge

【解决方案1】：

您可以设置止损点，如下所示：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
        ]

所以颜色结束后立即设置新颜色。

【讨论】：

不知道我是怎么错过的，比我的解决方案好得多！
这个还是渐变色，怎么改成分类色主题
我不确定你的意思。您想在动画期间消除颜色变化吗？这是 Highcharts 中的默认动画。您可以包装series.drawPoints 以更改动画方式，但这需要一些编码。下面是一个如何移除颜色补间的简单示例：jsfiddle.net/4zVU8/64（现在颜色在设置新值之后，动画之前立即更改为新颜色）。
值 0.805 (161 km/h) 仍然是橙色的。
停靠点可以完全相同：jsfiddle.net/BlackLabel/bwd29xos

【解决方案2】：

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

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

这是一个小提琴demo。

【讨论】：

虽然这适用于静态数据，但我似乎无法让它适用于动态数据。我有 setinterval 每隔几秒/分钟提取一次数据，更改 chart.yAxis.maxColor = newVal >= 80 ? '#FF0000' : (newVal >= 60 ? '#FFFF00' : '#00FF00'); 似乎不起作用
@siddhantKumar，请参阅下面的回复。似乎它有效，并且会比我的更受欢迎。
这都是主观的。我无法为每个颜色范围创建数组。所以你的解决方案适合我的需要。再次感谢。

【解决方案3】：

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

【讨论】：