Настройте маркер Sankey Highcharts и ширину ссылки - PullRequest
Новая
       22

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

0 голосов
/ 13 февраля 2019

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

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

marker: {
  symbol: 'triangle'
}

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

1 Ответ

0 голосов
/ 14 февраля 2019

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

...