问题:

I am trying to use the Highcharts gauge. Is there a way to set the plotband to a linear gradient? If my gauge has a value from 0-100, I want the plot band to shift from red at 0 to yellow at 50 to green at 100.

I thought that I could just generate the indiviual plotband sections for each stop point, 1-100 but if there was a way to set a linear grandient that would be so much cleaner. Any one know a way?

回答1:

Yes, it is possible. Try something like this:

yAxis: {
        min: 0,
        max: 100,
        plotBands: [{
            color: {
                linearGradient:  [300, 300, 0, 0],
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(150, 200, 155)']
                ]
            },
            from: 0,
            to: 100
        }],
    },

http://jsfiddle.net/fsQZ7/

By carefully chosing your colours, linearGradients and from/to, you should be able to combine several plotbands to do what you want.

回答2:

read "LINEAR GRADIENTS" on

http://www.highcharts.com/docs/chart-design-and-style/colors

Example: from yellow to green to red:

plotBands: [{
    from: 0,
    to: 29,
    color: '#DDDF0D' // yellow
},{
    from: 29,
    to: 40,
    color: {
        linearGradient:  { x1: 0, x2: 0, y1: 0, y2: 1 },
        stops: [
            [0, '#55BF3B'], //green
            [1, '#DDDF0D'] //yellow
        ]
    }
}, {
    from: 40,
    to: 51,
    color: {
        linearGradient:  { x1: 0, x2: 0, y1: 0, y2: 1 },
        stops: [
            [0, '#55BF3B'], //green
            [1, '#DF5353'] //red
        ]
    }
}, {
    from: 51,
    to: 80,
    color: '#DF5353' //red
}]