Question

我正在尝试使用Highcharts创建网络图，如下所示：

但是，我没有看到任何添加箭头的选项，而是连接Highcharts网络图模块中连接节点的线段。使用Highcharts可以做到这一点吗？如果不是，是否有更好的替代方法？这是我目前要呈现网络图的代码。

    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
    }]
});

这将如下所示绘制网络图：

Answer 1

根据评论-这是有关如何在网络图系列的链接末尾呈现箭头的答案。

演示：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));

Highcharts网络图箭头链接

1 个答案: