桑基图上的渐变答案

【问题标题】：Gradient on sankey diagram桑基图上的渐变
【发布时间】：2019-01-31 07:56:51
【问题描述】：

我对桑基图中的渐变有一点问题。我的桑基图看起来像这样 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
    }
}

如有任何想法，我将不胜感激。

【问题讨论】：

标签： highcharts sankey-diagram

【解决方案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

【讨论】：