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

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