highcharts - ハイチャートの複数のしきい値

Question

私は実際に、複数のしきい値を表示するために HighCharts を使用しようとしています。

これが私のコードの一部です。

特にここ：

var translatedThreshold = series.yAxis.translate(threshold1),
        y1 = Math.round(series.yAxis.len - translatedThreshold),
        y2 = y1 + 2; // 0.01 would be fine, but IE9 requires 2

    // Apply gradient to the path
    series.graph.attr({
        stroke: {
            linearGradient: [0, y1, 0, y2],
            stops: [
                [0, colorAbove],
                [1, colorBelow]
            ]
        }
     });

    // Apply gradient to the area
    if (series.area) {
        series.area.attr({
            fill: {
                linearGradient: [0, y1, 0, y2],
                stops: [
                    [0, colorAbove],
                    [1, colorBelow]
                ]
            }
         });
    }        

実際には、2 つのしきい値があり、1 つは 0 で、もう 1 つは 3 です。

ドットのしきい値は正しいです (値が 0 ～ 3 で、色の値が ColorMiddle であるため、青いドットが表示されます)。

曲線と面積については、シリーズ グラフに追加する方法がわからないため、colorMiddle の値は表示されません。

series.yAxis.translate(threshold2) で translatorThreshold2 を使用し、それらを series.area.attr に追加する必要があると思いますが、正確な方法はわかりません。

誰にもアイデアはありますか？

EDIT1 : しきい値の線 (下の例では青色) を表示できましたが、領域が正しく塗りつぶされていません。領域は 0 から 300 の間の青色で、色は緑色 (colorMiddle ではなく、colorAbove とも呼ばれます) である必要があります。

結果はここに表示されます：http: //jsfiddle.net/LeLwu/27/（ChromeとFirefoxではたまたま異なります...）