如何使用HighCharts Network chart实现中心节点连接两组独立节点效果

核心实现思路 #

• 节点分为三类：中心节点、分组1节点、分组2节点，给所有节点增加自定义group标识做区分
• 固定中心节点坐标，禁用自动布局对中心节点的位置调整
• 可选增加坐标约束逻辑，让两个分组的节点分别排布在中心节点两侧，避免交叉

完整可运行配置示例 #

// 前置依赖：需先引入 highcharts 及 highcharts/modules/networkgraph 模块
Highcharts.chart('container', {
  chart: {
    type: 'networkgraph',
    height: 600,
    width: 800
  },
  title: {
    text: '双分组中心节点网络图'
  },
  plotOptions: {
    networkgraph: {
      keys: ['from', 'to'],
      layoutAlgorithm: {
        enableSimulation: true,
        linkLength: 120, // 调整该值控制节点到中心的连线长度
        gravitationalConstant: 2, // 调整该值控制同组节点分散程度
        friction: -0.9
      }
    }
  },
  series: [{
    dataLabels: {
      enabled: true,
      linkFormat: ''
    },
    nodes: [
      // 中心节点配置，固定在画布中心
      {
        id: 'center',
        name: '中心节点',
        color: '#f15c80',
        fixed: true,
        x: 400,
        y: 300
      },
      // 分组1节点
      { id: 'g1_1', name: '分组1节点1', group: 1, color: '#7cb5ec' },
      { id: 'g1_2', name: '分组1节点2', group: 1, color: '#7cb5ec' },
      { id: 'g1_3', name: '分组1节点3', group: 1, color: '#7cb5ec' },
      { id: 'g1_4', name: '分组1节点4', group: 1, color: '#7cb5ec' },
      // 分组2节点
      { id: 'g2_1', name: '分组2节点1', group: 2, color: '#90ed7d' },
      { id: 'g2_2', name: '分组2节点2', group: 2, color: '#90ed7d' },
      { id: 'g2_3', name: '分组2节点3', group: 2, color: '#90ed7d' }
    ],
    data: [
      // 分组1所有节点连接中心
      ['center', 'g1_1'],
      ['center', 'g1_2'],
      ['center', 'g1_3'],
      ['center', 'g1_4'],
      // 分组2所有节点连接中心
      ['center', 'g2_1'],
      ['center', 'g2_2'],
      ['center', 'g2_3']
    ]
  }],
  // 可选：添加渲染事件强制分组分离，避免节点跨区域交叉
  chart: {
    events: {
      render: function () {
        const centerX = this.plotWidth / 2
        this.series[0].nodes.forEach(node => {
          if (node.group === 1 && node.plotX > centerX) {
            node.plotX = centerX - 30 - Math.random() * 60
          } else if (node.group === 2 && node.plotX < centerX) {
            node.plotX = centerX + 30 + Math.random() * 60
          }
        })
      }
    }
  }
});

自定义调整说明 #

• 如果不需要自动布局，可以给所有节点设置fixed: true属性，手动指定每个节点的x、y坐标即可完全固定布局
• 调整linkLength参数可以控制节点与中心节点的距离，值越大节点越分散
• 修改gravitationalConstant可以调整同组节点之间的排斥力，值越大同组节点间距越大

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