2020-08-01 19:52发布

问题:

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: {
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:

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
}]
``````

Ta的文章 更多文章

0条评论