在Highchart solidgauge中使用渐变颜色

时间:2014-09-25 12:07:10

标签: highcharts

$(function () {

    var gaugeOptions = {

        chart: {
            type: 'solidgauge'
        },

        title: null,

        pane: {
            center: ['50%', '85%'],
            size: '140%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },

        tooltip: {
            enabled: false
        },

        // the value axis
        yAxis: {
            lineWidth: 0,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            title: {
                y: -70
            },
            labels: {
                y: 16
            }
        },

        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        }
    };

    // The speed gauge
    $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: 0,
            max: 100,
            title: {
                text: 'Speed'
            }            
        },
        series: [{
            name: 'Speed',
            data: [75]
        }]

    }));
});

使用Highchart的solidgauge。有没有办法让渐变色达到仪表上显示的值?

例如,如果我的仪表从0到100,并且在特定时间我们显示的值是75,我想将其显示为从绿色左侧部分过渡到小型红色右侧部分的渐变颜色。当然,本例中剩余的25%的仪表不应该只显示仪表的背景颜色。

有办法吗?

0 个答案:

没有答案