桑基图上的梯度

Question

桑基图中的梯度有点问题。我的桑基图看起来像这样 sankey diagram

我不知道如何设置渐变从第一个节点流向第二个节点等。我想这样创建 sankey diagram

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

我的 JS 代码只包含 sankeyChart class 看起来像这样

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

桑基图上的梯度

Gradient on sankey diagram

highcharts

sankey-diagram