高亮区域范围图表,其后跟随线条的渐变

Question

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

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

我想要做的是让渐变跟随曲线,使得沿底线的任何点的颜色都是相同的,并且当它到达顶线时它以相同的颜色结束.我很确定这在高级图表中目前不是一个选项,但我只是想知道是否有人之前遇到过此问题.以下是当前生成渐变的代码:

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

谢谢

注意:这与线图(Highcharts)上的渐变填充不同,因为我需要跟随曲线的渐变

Answer 1

难点在于粒度:Highcharts为系列的点绘制一条SVG路径,并将一条路径与渐变相关联.但是,如果您的系列数据是相对线性的,则以下近似可能很有用.看看我创建的jsfiddle:

假设您的系列数据不是静态的,我的演示包括两个系列和一个函数,对于每个系列,它会尝试动态创建最接近您要求的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