highcharts - 勾配プロットバンドを備えたHighchartのゲージ

Question

Highchartsゲージを使用しようとしています。プロットバンドを線形勾配に設定する方法はありますか？ゲージの値が0〜100の場合、プロットバンドを0の赤から50の黄色、100の緑にシフトします。

ストップポイントごとに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/

色、linearGradients、および from/to を慎重に選択することで、複数のプロットバンドを組み合わせて目的を達成できるはずです。

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