Highcharts中的多个阈值

Question

我实际上是在尝试使用HighCharts来显示多个阈值。

以下是我code的部分内容。

特别是在这里：

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

实际上，有两个阈值，一个在0上，一个在3上。

对于点，阈值是正确的（显示蓝点，因为其值介于0和3之间，其颜色值为ColorMiddle）。

对于曲线和区域，不会显示colorMiddle值，因为我不知道如何在系列图上添加它们。

我想我必须使用translatedThreshold2和series.yAxis.translate（threshold2），并将它们添加到series.area.attr上，但我不知道究竟是怎么回事。

有没有人有想法？

EDIT1：我设法显示阈值线（下例中为蓝色），但区域未正确填充。该区域应该是0到300之间的蓝色，它是绿色（AKA颜色，而不是颜色中间）。

结果显示在此处：http://jsfiddle.net/LeLwu/27/（在Chrome和Firefox中恰好有所不同......）