Градиент на диаграмме Санки - PullRequest
Новая
       21

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

0 голосов
/ 31 января 2019

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

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

В настоящее время я сделал что-то вроде этого 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
    }
}

Буду благодарен за любую идею.

1 Ответ

0 голосов
/ 31 января 2019

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

...