自定义 Sankey Highcharts 标记和 link 宽度

Question

我正在使用 Highcharts 实现 Sankey 图表，我需要在其中以特定符号显示每个节点。我想为我的 Sankey 图实现标记符号功能。

我尝试使用 marker.symbol，但它不起作用。

marker: {
  symbol: 'triangle'
}

有没有办法为桑基图实现自定义交易品种？还有一种方法可以控制每个节点之间的链接宽度吗？我所有的节点都具有相同的权重，因此我想要一种方法来固定我的宽度。

Answer 1

Highcharts 不提供允许修改 sankey 图表类型的标记符号和 link 宽度的选项，因此默认情况下是不可能的。

解决方法

要修改 link 的宽度，请设置 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

自定义 Sankey Highcharts 标记和 link 宽度

Customise Sankey Highcharts marker and link width

highcharts

sankey-diagram