Highchart 区域范围图表，带有沿线的渐变

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：

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

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

Answer 2

我没有任何示例，我也不确定它是否已经在规范中，但我很确定实现此效果的唯一方法是使用 svg mash 渐变。

您可以使用路径点作为混合矩阵的边界点并获得您想要的效果。

更多信息请参见here。