2

我实际上是在尝试使用 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]
                ]
            }
         });
    }

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

对于点，阈值是正确的（显示一个蓝点，因为它的值在 0 和 3 之间，并且它的颜色值是 ColorMiddle）。

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

我想我必须使用带有 series.yAxis.translate(threshold2) 的 translateThreshold2，并将它们添加到 series.area.attr 但我不知道具体如何。

有人有想法吗？

EDIT1：我设法显示了阈值线（在下面的示例中为蓝色），但该区域未正确填充。该区域应该是介于 0 和 300 之间的蓝色，并且是绿色（也称为 colorAbove，而不是 colorMiddle）。

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

4

0 回答 0