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

Question

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

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

由highchart提供的源代码

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

1)绿色高达20%

2)黄色高达80%和

3)一旦值超过80%,仪表颜色应为红色.

可能吗？

Answer 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
        ]

因此,颜色结束后正确设置新的颜色.

Answer 2

要获得纯色，请将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);

这是一个小提琴演示。