Градиент на диаграмме Санки

У меня небольшая проблема с градиентом на диаграмме Санки. Моя диаграмма Санки выглядит так: диаграмма Санки

Я не знаю, как установить градиент для перехода от первого узла ко второму узлу и т. д. Я хотел бы создать такой диаграмма Санки

На данный момент я сделал что-то вроде этого 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
person Vix    schedule 31.01.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете перезаписать метод 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

person ppotaczek    schedule 31.01.2019