Highcharts Network Graph Arrow Links

问题

I am trying to create a network graph using Highcharts as follows:

However, I did not see any options to add arrows instead of line segments connecting the nodes in the Highcharts network graph module. Is this possible to do this using Highcharts? If not, are there any better alternatives for this use case? Here is the code I currently have to render a network graph.

    eventWorkflowGraph = Highcharts.chart('graph-canvas', {
    chart: {
        type: 'networkgraph',
        spacingBottom: 15,
        spacingTop: 15,
        spacingLeft: 15,
        spacingRight: 15,
    },
    title: {
        text: 'Workflow'
    },
    subtitle: {
        text: 'Network Graph'
    },
    plotOptions: {
        networkgraph: {
            keys: ['from', 'to'],
            layoutAlgorithm: {
                friction: -0.9,
                linkLength: 100,
                enableSimulation: true
            },
            link: {
                width: 4
            }
        }
    },
    series: [{
        dataLabels: {
            enabled: true,
            linkFormat: '',
        },
        marker: {
            radius: 45
        },
        data: edges
    }]
});

This renders a network graph as follows:

回答1:

According to the comments - here is an answer on how to render the arrows at the end of the links in the networkgraph series.

Demo: https://jsfiddle.net/BlackLabel/cnjw7v2s/

(function(H) {
  H.wrap(H.seriesTypes.networkgraph.prototype.pointClass.prototype, 'getLinkPath', function(p) {
    var left = this.toNode,
      right = this.fromNode;

    var angle = Math.atan((left.plotX - right.plotX) /
      (left.plotY - right.plotY));


    if (angle) {
      let path = ['M', left.plotX, left.plotY, right.plotX, right.plotY],
        lastPoint = left,
        nextLastPoint = right,
        pointRadius = 45,
        arrowLength = 20,
        arrowWidth = 10;

      if (left.plotY < right.plotY) {
        path.push(
          nextLastPoint.plotX - pointRadius * Math.sin(angle),
          nextLastPoint.plotY - pointRadius * Math.cos(angle),
        );
        path.push(
          nextLastPoint.plotX - pointRadius * Math.sin(angle) - arrowLength * Math.sin(angle) - arrowWidth * Math.cos(angle),
          nextLastPoint.plotY - pointRadius * Math.cos(angle) - arrowLength * Math.cos(angle) + arrowWidth * Math.sin(angle),
        );

        path.push(
          nextLastPoint.plotX - pointRadius * Math.sin(angle),
          nextLastPoint.plotY - pointRadius * Math.cos(angle),
        );
        path.push(
          nextLastPoint.plotX - pointRadius * Math.sin(angle) - arrowLength * Math.sin(angle) + arrowWidth * Math.cos(angle),
          nextLastPoint.plotY - pointRadius * Math.cos(angle) - arrowLength * Math.cos(angle) - arrowWidth * Math.sin(angle),
        );


      } else {
        path.push(
          nextLastPoint.plotX + pointRadius * Math.sin(angle),
          nextLastPoint.plotY + pointRadius * Math.cos(angle),
        );
        path.push(
          nextLastPoint.plotX + pointRadius * Math.sin(angle) + arrowLength * Math.sin(angle) - arrowWidth * Math.cos(angle),
          nextLastPoint.plotY + pointRadius * Math.cos(angle) + arrowLength * Math.cos(angle) + arrowWidth * Math.sin(angle),
        );
        path.push(
          nextLastPoint.plotX + pointRadius * Math.sin(angle),
          nextLastPoint.plotY + pointRadius * Math.cos(angle),
        );
        path.push(
          nextLastPoint.plotX + pointRadius * Math.sin(angle) + arrowLength * Math.sin(angle) + arrowWidth * Math.cos(angle),
          nextLastPoint.plotY + pointRadius * Math.cos(angle) + arrowLength * Math.cos(angle) - arrowWidth * Math.sin(angle),
        );

      }

      return path
    }
    return [
      ['M', left.plotX || 0, left.plotY || 0],
      ['L', right.plotX || 0, right.plotY || 0],
    ];
  });
}(Highcharts));

来源：https://stackoverflow.com/questions/62903135/highcharts-network-graph-arrow-links