Highcharts solidgauge：如何禁用渐变填充？-Java 学习之路

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

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

source code as provided by highchart

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

1） Green 颜色高达20％

2） yellow 高达80％和

3）一旦值超过80％规格颜色应为 Red .

可能吗？

3 回答

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

    ....

EDITS FOR COMMENT

好吧，根据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 .

回复于 2024-04-29T21:41:32+08:00

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

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

回复于 2024-04-29T21:41:32+08:00

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

回复于 2024-04-29T21:41:32+08:00

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

3 回答

相关问题