javascript - HighCharts を使用して折れ線グラフの y 軸にグラデーションを追加するにはどうすればよいですか?

Question

両方の y 軸に沿ってグラデーション インジケーターを使用して折れ線グラフを作成しようとしています。

以下に例を示します。これにより、約 90% の結果が得られます。

$('#container').highcharts({
    // ...
    yAxis: [{
        title: {
            text: 'parts per million',
            style: {
                color: '#444'
            }
        },
        opposite: true,
        lineColor: {
            linearGradient: [0, 0, 0, 300],
            stops: [
                [0, 'rgb(255, 0, 0)'],
                [0.5, 'rgb(255, 255, 0)'],
                [1, 'rgb(0, 255, 0)'],

                ]
        },
        lineWidth: 15,
        offset: 10
    }, {
        opposite: false,
        linkedTo: 0,
        gridLineWidth: 0,
        title: {
            text: 'parts per million',
            style: {
                color: '#444'
            }
        },
        lineColor: {
            linearGradient: [0, 0, 0, 300],
            stops: [
                [0, 'rgb(255, 0, 0)'],
                [0.5, 'rgb(255, 255, 0)'],
                [1, 'rgb(0, 255, 0)']
            ]
        },
        lineWidth: 15,
        offset: 10
    }]
    // ...

( http://jsfiddle.net/mmwhx/6/で完全な例を参照してください)

残りの 10% では、グラデーションの「停止」を正確に制御して、y 軸に沿った値に対応させる必要があります (たとえば、50 ～ 100 の場合、バーは緑色に、100 ～ 200 の場合、バーは黄色になります)。 ; 200 から軸の終わりまで、バーは赤になります)。y 軸に沿った値の範囲を制限していないため、0 ～ 1.0 のスケールを使用してストップがどこにあるのかを判断することは不可能です。

y 軸の最大値が何らかの形で利用可能であれば、いつでもストップを計算できます。しかし、残念ながら例に出くわしたことはありませんが、私が望むものを達成するためのよりエレガントな方法があるかもしれないことを教えてくれます。