Question

我想在一个图表上绘制一个区域范围图表和一条线，我希望该线条在区域范围内时为黑色，而在区域范围之外时则为红色，如图片所示。

enter image description here

我使用下面的代码绘制区域范围，但我不知道如何在区域范围之外绘制不同颜色的线条。 http://jsfiddle.net/2cVGX/

        $(function () {

        var limits = [
                [64064, 14.3, 27.7],
                [64928, 14.5, 27.8],
                [65792, 15.5, 29.6],
                [66656, 16.7, 30.7],
                [67520, 16.5, 25.0],
                [68384, 17.8, 25.7],
                [69248, 13.5, 24.8],
                [70112, 10.5, 21.4],
                [70976, 09.2, 23.8],
                [71840, 11.6, 21.8],
                [72704, 10.7, 23.7],
                [73568, 11.0, 23.3],
                [74432, 11.6, 23.7],
                [75296, 11.8, 20.7],
                [76160, 12.6, 22.4],
                [77024, 13.6, 19.6],
                [77888, 11.4, 22.6],
                [78752, 13.2, 25.0],
                [79616, 14.2, 21.6],
                [80480, 13.1, 17.1],
                [81344, 12.2, 15.5],
                [82208, 12.0, 20.8],
                [83072, 12.0, 17.1],
                [83936, 12.7, 18.3],
                [84800, 12.4, 19.4],
                [85664, 12.6, 19.9],
                [86528, 11.9, 20.2],
                [87392, 11.0, 19.3],
                [88256, 10.8, 17.8],
                [89120, 11.8, 18.5],
                [89984, 10.8, 16.1]
        ],
            values = [
                [64064, 21.5],
                [64928, 22.1],
                [65792, 23.0],
                [66656, 23.8],
                [67520, 21.4],
                [68384, 21.3],
                [69248, 18.3],
                [70112, 15.4],
                [70976, 16.4],
                [71840, 17.7],
                [72704, 17.5],
                [73568, 17.6],
                [74432, 17.7],
                [75296, 16.8],
                [76160, 17.7],
                [77024, 16.3],
                [77888, 17.8],
                [78752, 18.1],
                [79616, 17.2],
                [80480, 14.4],
                [81344, 13.7],
                [82208, 17.7],
                [83072, 20.6],
                [83936, 20.3],
                [84800, 19.3],
                [85664, 15.8],
                [86528, 15.2],
                [87392, 14.8],
                [88256, 14.4],
                [89120, 15],
                [89984, 13.6]
            ],

            targets = [
                [64064, 22.5],
                [64928, 23.1],
                [65792, 21.0],
                [66656, 22.8],
                [67520, 20.4],
                [68384, 22.3],
                [69248, 18.4],
                [70112, 15.5],
                [70976, 16.4],
                [71840, 17.6],
                [72704, 18.6],
                [73568, 19.6],
                [74432, 18.7],
                [75296, 17.8],
                [76160, 17.7],
                [77024, 16.5],
                [77888, 16.8],
                [78752, 17.1],
                [79616, 17.5],
                [80480, 15.4],
                [81344, 14.7],
                [82208, 16.7],
                [83072, 15.6],
                [83936, 15.3],
                [84800, 15.5],
                [85664, 15.8],
                [86528, 15.2],
                [87392, 15.8],
                [88256, 15.4],
                [89120, 15.3],
                [89984, 14.6]
            ];

        $('#container').highcharts({
            title: {
                text: null
            },
            xAxis: {
                title: {
                    text: null
                },
                type: 'linear',
                labels: {
                    enabled: false
                },
                lineWidth: 0,
                tickWidth: 0
            },

            yAxis: {
                title: {
                    text: null
                },
                labels: {
                    enabled: false
                },
                gridLineWidth: 0
            },

            tooltip: {
                crosshairs: true,
                shared: true,
                valueSuffix: 'Virt'
            },

            legend: {
                enabled: false
            },

            series: [{
                id: 'valueLine',
                name: 'Value',
                type: 'spline',
                data: values,
                zIndex: 1,
                color: 'black',
                shadow: true,

                marker: {
                    fillColor: 'black',
                    lineWidth: 1,
                    radius: 2,
                    lineColor: "white",
                    enabled: false,
                    symbol: 'circle'
                }
            }, {
                id: 'targetLine',
                name: 'Target',
                type: 'spline',
                data: targets,
                linkedTo: 'valueLine',
                zIndex: 1,
                color: 'gray',
                dashStyle: 'DashDot',
                marker: {
                    fillColor: 'gray',
                    lineWidth: 1,
                    radius: 2,
                    lineColor: "white",
                    enabled: false,
                    symbol: 'circle'
                }
            }, {
                id: 'limitsArea',
                name: 'Limits',
                data: limits,
                type: 'areasplinerange',
                lineWidth: 1,
                lineColor: 'gray',
                linkedTo: 'valueLine',
                color: "lightGray",
                fillOpacity: 0.3,
                zIndex: 0
            }]

        });

    });

Answer 1

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

一些尝试导致单个点Fiddle1的颜色发生变化，另一次尝试导致阈值对路径的笔划应用渐变

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;

}

fiddle2，对此question

表示赞赏

另一个可能的解决方案是以编程方式将数据拆分为2个系列，一个在范围内，另一个不在范围内。通过将not着色为红色，它可能看起来像是一行

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

Example，虽然您可以看到他们没有加入

<强>更新

管理以使其正确显示

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

Example

当超出区域范围时，Html5折线图具有不同的颜色

1 个答案: