Question

我在sankey图中的渐变有点问题。我的sankey图看起来像这样 sankey diagram

我不知道如何设置渐变以从第一个节点流到第二个节点，依此类推。我想这样创建 sankey diagram

这时候我做了这样的事情 JSFiddle，但这不是我想要的。

我的JS代码仅包含如下所示的sankeyChart类

function sankeyChart() {
    var sankey = Highcharts.chart('container', {
        title: {
            text: 'Sankey Diagram'
        },

        series: [{
            keys: ['from', 'to', 'weight'],
            data: [],
            type: 'sankey',
            name: ''
        }],
        plotOptions: {
            series: {
                colorByPoint: true
            }
        },
        credits: {
            enabled: false
        }
    });

    function setData(data) {
        sankey.series[0].update({
            data: data,
        }, true);
    }

    return {
        'chart': sankey,
        'setData': setData
    }
}

我将不胜感激。

Answer 1

您可以覆盖pointAttribs方法并以所需的方式设置渐变：

var H = Highcharts;

H.seriesTypes.sankey.prototype.pointAttribs = function(point, state) {
    var opacity = this.options.linkOpacity,
        color = point.color;

    if (state) {
        opacity = this.options.states[state].linkOpacity || opacity;
        color = this.options.states[state].color || point.color;
    }

    return {
        fill: point.isNode ?
            color : {
                linearGradient: {
                    x1: 0,
                    x2: 1,
                    y1: 0,
                    y2: 0
                },
                stops: [
                    [0, H.color(color).setOpacity(opacity).get()],
                    [1, H.color(point.toNode.color).setOpacity(opacity).get()]
                ]
            }
    };
}

实时演示：https://jsfiddle.net/BlackLabel/w3qgu497/

文档：https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Sankey图上的渐变

1 个答案: