Question

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

我尝试使用不起作用的marker.symbol。

marker: {
  symbol: 'triangle'
}

是否可以为Sankey图实现自定义符号？还有一种方法可以控制每个节点之间的链接宽度吗？我所有的节点都具有相同的权重，因此我想要一种固定宽度的方法。

Answer 1

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

自定义Sankey Highcharts标记和链接宽度

1 个答案: