无链接的Highcharts sankey节点

5lhxktic  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(226)

我有一个有两面的highcharts桑基图:

有些情况下,我的一些节点有空链接(= 0权重)。我希望节点被显示,尽管没有链接从或到它。
我能做到吗?
我在this thread上读到我必须用weight=1的连接来伪造它,我可以让链接透明,然后抽动工具提示来隐藏这些,但是对于感觉很基本的东西来说,这是非常痛苦的。
也许是generateNode调用的自定义调用或其他什么?
谢谢你的帮助

fcipmucu

fcipmucu1#

weight0时,您可以使用下列wrap来显示节点。

const isObject = Highcharts.isObject,
   merge = Highcharts.merge

 function getDLOptions(
   params
 ) {
   const optionsPoint = (
       isObject(params.optionsPoint) ?
       params.optionsPoint.dataLabels : {}
     ),
     optionsLevel = (
       isObject(params.level) ?
       params.level.dataLabels : {}
     ),
     options = merge({
       style: {}
     }, optionsLevel, optionsPoint);
   return options;
 }

 Highcharts.wrap(
   Highcharts.seriesTypes.sankey.prototype,
   'translateNode',
   function(proceed, node, column) {
     var translationFactor = this.translationFactor,
       series = this,
       chart = this.chart,
       options = this.options,
       sum = node.getSum(),
       nodeHeight = Math.max(Math.round(sum * translationFactor),
         this.options.minLinkWidth),
       nodeWidth = Math.round(this.nodeWidth),
       crisp = Math.round(options.borderWidth) % 2 / 2,
       nodeOffset = column.sankeyColumn.offset(node,
         translationFactor),
       fromNodeTop = Math.floor(Highcharts.pick(nodeOffset.absoluteTop, (column.sankeyColumn.top(translationFactor) +
         nodeOffset.relativeTop))) + crisp,
       left = Math.floor(this.colDistance * node.column +
         options.borderWidth / 2) + Highcharts.relativeLength(node.options.offsetHorizontal || 0,
         nodeWidth) +
       crisp,
       nodeLeft = chart.inverted ?
       chart.plotSizeX - left :
       left;
     node.sum = sum;

     proceed.apply(this, Array.prototype.slice.call(arguments, 1));

     if (1) {
       // Draw the node
       node.shapeType = 'rect';

       node.nodeX = nodeLeft;
       node.nodeY = fromNodeTop;

       let x = nodeLeft,
         y = fromNodeTop,
         width = node.options.width || options.width || nodeWidth,
         height = node.options.height || options.height || nodeHeight;

       if (chart.inverted) {
         x = nodeLeft - nodeWidth;
         y = chart.plotSizeY - fromNodeTop - nodeHeight;
         width = node.options.height || options.height || nodeWidth;
         height = node.options.width || options.width || nodeHeight;
       }

       // Calculate data label options for the point
       node.dlOptions = getDLOptions({
         level: (this.mapOptionsToLevel)[node.level],
         optionsPoint: node.options
       });

       // Pass test in drawPoints
       node.plotX = 1;
       node.plotY = 1;

       // Set the anchor position for tooltips
       node.tooltipPos = chart.inverted ? [
         (chart.plotSizeY) - y - height / 2,
         (chart.plotSizeX) - x - width / 2
       ] : [
         x + width / 2,
         y + height / 2
       ];

       node.shapeArgs = {
         x,
         y,
         width,
         height,
         display: node.hasShape() ? '' : 'none'
       };
     } else {
       node.dlOptions = {
         enabled: false
       };
     }
   }
 );

演示:http://jsfiddle.net/BlackLabel/uh6fp89j/

在上面的解决方案中,另一种节点布置将难以实现,并且可能需要超出我们的支持范围的大量修改。
你可以考虑使用上面提到的“棘手的解决方案”,因为可能会返回一个更好的定位结果。这个解决方案是基于改变chart.load()事件上的0权值节点,并转换工具提示,所以它可能需要对你的项目进行调整。

chart: {
     events: {
       load() {
         this.series[0].points.forEach(point => {
           if (point.weight === 0) {
             point.update({
               weight: 0.1,
               color: 'transparent'
             })
           }
         })
       }
     }
   },

   tooltip: {
     nodeFormatter: function() {
       return `${this.name}: <b>${Math.floor(this.sum)}</b><br/>`
     },
     pointFormatter: function() {
       return `${this.fromNode.name} → ${this.toNode.name}: <b>${Math.floor(this.weight)}</b><br/>`
     }
   },

演示:http://jsfiddle.net/BlackLabel/0dqpabku/

相关问题