Question

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

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

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

Answer 2

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

您可以使用路径点作为mash矩阵的边界点，并获得所需的效果。

有关详细信息，请参阅here。

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

2 个答案: