javascript - Highcharts Area Range 图表，沿线渐变

Question

以下是具有渐变的区域范围图表。

http://jsfiddle.net/gXpHH/1/

我想要做的是让渐变跟随曲线，这样沿底线的任何点的颜色都是相同的，并且当它到达顶线时以相同的颜色结束。我很确定目前在 highcharts 中这不是一个选项，但我只是想看看以前是否有人遇到过这个问题。这是当前生成渐变的代码:

series: [{
            name: "Shade",
            fillColor: {
                linearGradient: [0, 0, 0, 300],
                stops: [
                    [0, "#4572A7"],
                    [1, "rgba(2,0,0,0)"]
                ]
            },
            data: [
                [0, 14733, 18890],
                [1, 16583, 21642],
                //... rest here
                [10, 42417, 61955]
            ]
    }]

谢谢

注意:这与Gradient Fill on Line Chart (Highcharts) 不同因为我需要渐变来跟随曲线

Answer 1

困难在于粒度:Highcharts 为系列的点绘制一条 SVG 路径，并将该路径与渐变相关联。但是，如果您的系列数据相对线性，则以下近似值可能会有用。查看jsfiddle that I've created :

假设您的系列数据不是静态的，我的演示包括两个系列和一个函数，该函数针对每个系列尝试动态创建最接近您要求的 linearGradient:

function getLinearGradient(series) {
    var lastY0=null, lastY1=null, maxY0=null, maxY1=null;
    $.each(series.data, function(key,value) {
        maxY0 = Math.max(value[1],maxY0);
        maxY1 = Math.max(value[2],maxY1);
        lastY0 = value[1];
        lastY1 = value[2];
    });
    var firstY0 = series.data[0][2],
        firstY1 = series.data[0][2]
    ;
    var minY0=maxY0, minY1=maxY1;
    $.each(series.data, function(key,value) {
        minY0 = Math.min(value[1],minY0);
        minY1 = Math.min(value[2],minY1);
    });
    var minY = minY0,
        maxY = maxY1,
        heightY = maxY - minY
    ;        
    var gradient = {
            x1: 10 + ( ((firstY0-minY) / heightY) * 80 ) + "%",
            y1: "10%",
            x2: 10 + ( ((lastY1-minY) / heightY) * 80 ) + "%",
            y2: "90%"
    };
    return gradient;
};

当然，这种方法不是一个成熟的解决方案，只有当您处理的数据大致呈线性曲线时才有用。这是 jsfiddle