如何避免Highcharts网络图中同一节点对的多条链路重叠合并

要解决同节点间多条直线链路重叠遮挡的问题，推荐采用链路差异化弯曲的方案，具体实现逻辑如下： #

方法1：为不同链路单独设置弯曲度 #

Highcharts 网络图模块原生支持curveFactor参数控制链路弯曲程度，你只需要给同节点对的不同链路配置不同的curveFactor取值，即可让链路呈现不同曲率的曲线，避免完全重叠：

1. 调整链路数据结构，为每条链路增加自定义弯曲度属性

data: [
  ['PersonA','Software1','Activity1','Dot','teal', 0.2],
  ['Software1','PersonA','Activity1','Solid','teal', -0.2],
  ['PersonA','Software1','Activity2','Solid','red', 0.4]
]

2. 在图表配置中关联自定义属性，启用弯曲配置

plotOptions: {
  networkgraph: {
    // 按顺序匹配数据项对应属性
    keys: ['from', 'to', 'activity', 'dashStyle', 'color', 'curveFactor'],
    link: {
      // 可配置全局默认弯曲度，单链路配置会覆盖该值
      curveFactor: 0.1,
      // 保留你原有箭头、自定义样式的相关配置
    }
  }
}

配置说明 #

• 正反方向的链路可以设置正负相反的curveFactor，会向相反方向弯曲，区分度更高
• 若同节点对链路数量较多，可以扩大curveFactor的取值区间（取值范围建议在-0.5到0.5之间，避免弯曲度过大影响可读性）
• 如果不希望使用曲线，也可以给不同链路设置不同的linkOffset水平/垂直偏移，或是差异化线宽来降低遮挡影响，但弯曲方案的识别度最高

内容的提问来源于stack exchange，提问作者Blara