Javascript Html5折线图在超出区域范围时使用不同颜色

我想在一张图上画一个面积范围图和一条线，我希望这条线在面积范围内时为黑色，在面积范围外时为红色，如图所示

我使用了下面的代码来绘制arearange，但我不知道如何让它在超出arearange时以不同的颜色绘制线。

---

不幸的是，它不受支持。问题在于，线是作为单个路径绘制的，每个路径只能有一种颜色（渐变除外）

几次尝试导致更改单个点的颜色，另一次尝试基于阈值将渐变应用于路径的笔划

function applyGraphGradient() {

    // Options
    var threshold = 19,
        colorAbove = '#F00',
        colorBelow = '#000';

    // internal
    var series = this.series[0], 
        i,
        point;

    if (this.renderer.box.tagName === 'svg') {

        var translatedThreshold = series.yAxis.translate(threshold),
            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 colors to the markers
    for (i = 0; i < series.data.length; i++) {
        point = series.data[i];
        point.color = point.y < threshold ? colorBelow : colorAbove;
        if (point.graphic) {
            point.graphic.attr({
                fill: point.color
            });
        }
    }

    // prevent the old color from coming back after hover
    delete series.pointAttr.hover.fill;
    delete series.pointAttr[''].fill;

}

函数applyGraphGradient（）{
//选择权
风险值阈值=19，
颜色高于='#F00'，
颜色低于='#000'；
//内部的
var series=此.series[0]，
我
指向
if（this.renderer.box.tagName===“svg”）{
var translatedThreshold=series.yAxis.translate（阈值），
y1=数学圆（series.yAxis.len-translatedThreshold），
y2=y1+2；//0.01可以，但IE9需要2
//对路径应用渐变
series.graph.attr({
笔划：{
线性半径：[0，y1，0，y2]，
停止：[
[0，上面的颜色]，
[1，见下文]
]
}
});
}
//对标记应用颜色
对于（i=0；i

，这是我的荣幸

另一种可能的解决方案是通过编程将数据分成两个系列，一个在范围内，一个不在范围内。通过将颜色涂成红色，它可能看起来不是一条线

            var inRange = Array();
            var outRange = Array();

            for(var i = 0; i < values.length; i++) {
                var range = limits[i];
                var value = values[i];

                if(value[1] > range[1] && value[1] < range[2]) {
                     inRange.push(value);
                     outRange.push([value[0],null]);
                }
                else {
                    outRange.push(value);
                    inRange.push([value[0],null]);
                }
            }

var inRange=Array（）；
var outRange=Array（）；
对于（变量i=0；i范围[1]&值[1]<范围[2]）{
范围内推力（值）；
outRange.push（[value[0]，null]）；
}
否则{
超出范围。推（值）；
inRange.push（[value[0]，null]）；
}
}

，尽管正如你所看到的，它们并没有结合在一起

更新

设法使其正确显示

            var inRange = Array();
            var outRange = Array();

            var prev = 0; //1 = was valid, 2 = werent
            for(var i = 0; i < values.length; i++) {
                var range = limits[i];
                var value = values[i];

                if(value[1] > range[1] && value[1] < range[2]) {
                     inRange.push(value);


                    if(prev == 2) {
                        outRange.push(value);
                    }
                    else {
                        outRange.push([value[0],null]);
                    }
                    prev = 1;
                }
                else {
                    outRange.push(value);
                    inRange.push([value[0],null]);

                    if(prev == 1) {
                       outRange[i-1][5] = values[i-1][6];
                    }

                    prev = 2;
                }

                console.log(prev);
            }

var inRange=Array（）；
var outRange=Array（）；
var-prev=0//1=有效，2=无效
对于（变量i=0；i范围[1]&值[1]<范围[2]）{
范围内推力（值）；
如果（上一个==2）{
超出范围。推（值）；
}
否则{
outRange.push（[value[0]，null]）；
}
prev=1；
}
否则{
超出范围。推（值）；
inRange.push（[value[0]，null]）；
如果（上一个==1）{
超出范围[i-1][5]=数值[i-1][6]；
}
prev=2；
}
控制台日志（prev）；
}

---

简言之：不支持它。当然，您可以自己实现-找到系列的交叉点，然后为该点创建具有特定颜色的单独系列。@mKlus我的最后一次尝试使您接近所需的：）@PawełFus此解决方法的问题是，您无法使用样条线和区域样条线，因为红色的新样条线将不会具有相同的形状。在这里，它是通过线条和区域范围实现的。使用两个系列（黑色下为红色）并在黑色超出区域范围时删除点如何？这应该能解决问题。谢谢你的回答。我确实设法提出了“部分”解决方案，如您在这里所示。但是，我需要的“值”行只有在超出区域范围时才为红色，而不是像这样。我只看到两个选项，我可以这样做：1。使用渐变色（正如你在文章中提到的）。但是，如果使用样条线/面积样条线，我不确定如何计算交点（如果使用直线/面积范围，则更容易计算）。2.绘制2个系列，但同样，如果使用样条线/区域样条线，则不确定如何执行该操作，因为2个连接的系列与1个系列样条线的外观不同。Fiddle1、Fiddle2和示例是3个选项（第一个选项只是为标记着色），是的，它并不完美，但它尽可能接近。虽然从理论上讲，如果你计算出这条线从区域中穿过的点，并在每个序列中放置一个标记，你就会得到你所需要的。虽然我不知道该如何计算：）

            var inRange = Array();
            var outRange = Array();

            var prev = 0; //1 = was valid, 2 = werent
            for(var i = 0; i < values.length; i++) {
                var range = limits[i];
                var value = values[i];

                if(value[1] > range[1] && value[1] < range[2]) {
                     inRange.push(value);


                    if(prev == 2) {
                        outRange.push(value);
                    }
                    else {
                        outRange.push([value[0],null]);
                    }
                    prev = 1;
                }
                else {
                    outRange.push(value);
                    inRange.push([value[0],null]);

                    if(prev == 1) {
                       outRange[i-1][5] = values[i-1][6];
                    }

                    prev = 2;
                }

                console.log(prev);
            }