highcharts - 带梯度图带的 Highchart 量规

Question

我正在尝试使用 Highcharts 仪表。有没有办法将 plotband 设置为线性渐变？如果我的仪表的值介于 0-100 之间，我希望绘图带从 0 处的红色变为 50 处的黄色，再到 100 处的绿色。

我认为我可以为每个停止点生成单独的 plotband 部分，1-100 但如果有一种方法可以设置一个线性宏大，那就更干净了。有人知道方法吗？

Answer 1

对的，这是可能的。尝试这样的事情：

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/

通过仔细选择颜色、线性渐变和从/到，您应该能够组合多个绘图带来做您想做的事情。

Answer 2

阅读“线性渐变”

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

示例：从黄色到绿色到红色：

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