Настройте маркер Sankey Highcharts и ширину ссылки

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

Я пробовал использовать marker.symbol, который не работает.

marker: {
  symbol: 'triangle'
}

Есть ли способ реализовать пользовательские символы для графа Санки? Также есть ли способ, которым я могу контролировать ширину ссылок между каждым узлом? Все мои узлы имеют одинаковый вес, поэтому мне нужен способ исправить мою ширину.


highcharts sankey-diagram
person Guru    schedule 13.02.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Highcharts не предоставляет параметры, позволяющие изменять символ маркера и ширину ссылки для типа диаграммы sankey, поэтому по умолчанию это невозможно.

Временное решение

  • Чтобы изменить ширину ссылок, установите атрибуты scale и translate.

  • Чтобы изменить маркеры, используйте Highcharts.SVGRenderer и замените прямоугольники по умолчанию треугольниками.

    chart: {
    height: 200,
    events: {
        load: function() {
            var points = this.series[0].points,
                fromNodeBBox,
                toNodeBBox,
                linkBBox;

            points.forEach(function(p) {
                fromNodeBBox = p.fromNode.graphic.getBBox();
                toNodeBBox = p.toNode.graphic.getBBox();

                this.renderer.symbol(
                    'triangle',
                    fromNodeBBox.x + this.plotLeft + 10,
                    fromNodeBBox.y + this.plotTop,
                    fromNodeBBox.width,
                    fromNodeBBox.height
                ).attr({
                    fill: p.fromNode.color
                }).add();

                this.renderer.symbol(
                    'triangle',
                    toNodeBBox.x + this.plotLeft - 10,
                    toNodeBBox.y + this.plotTop,
                    toNodeBBox.width,
                    toNodeBBox.height
                ).attr({
                    fill: p.toNode.color,
                    zIndex: 3
                }).add();


                linkBBox = p.graphic.getBBox();
                p.graphic.attr({
                    transform: 'scale(1 0.5) translate(0 ' + (linkBBox.y + fromNodeBBox.height / 2) + ')'
                });

                p.fromNode.graphic.destroy();
                p.toNode.graphic.destroy();
            }, this);
        }
    }
}

Живая демонстрация: https://jsfiddle.net/BlackLabel/f4u03qvd/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#symbol

person ppotaczek    schedule 14.02.2019
comment
Спасибо ppotaczek !!. Это отлично работает только тогда, когда у меня есть один уровень от узла и два узла. но в моем приложении несколько уровней от узла до узлов, например ['A', 'B', 1], ['A', 'C', 1], ['C', 'D', 1] , ['C', 'E', 1] В этом случае я получаю сообщение об ошибке, как показано ниже. Есть идеи, как это решить? Uncaught TypeError: Невозможно прочитать кеш свойства undefined в a.SVGElement.getBBox (highcharts.src.js: 4787) в a.Chart. ‹Anonymous› ((индекс): 76) в Array.forEach (‹anonymous›) в a.Chart.load ((index): 75) в highcharts.src.js: 2624 в Array.forEach - person Guru; 15.02.2019
comment
Привет, Гуру! Да, вам нужно адаптировать это решение для других случаев, например: jsfiddle.net/BlackLabel/gpdhrt85 - person ppotaczek; 15.02.2019
comment
Спасибо ppotaczek за вашу помощь. Я адаптирую это в соответствии с моими требованиями. Это очень помогло !! - person Guru; 18.02.2019