Highcharts NetworkGraph 力导向网络图实战：节点关联关系自动布局案例

原创

用户4580137

发布于 2026-07-11 09:15:09

820

力导向网络图（force-directed network graph）是一种用“节点 + 连线”来展示关系的数据可视化图表。它会把节点当成带有物理“力”的点来模拟：相互连接的节点会拉近，所有节点之间又会彼此推开，最终自动形成一个比较清晰、美观的布局。

常见用途：

人物关系图
社交网络
组织架构关系
产品/服务依赖关系
交通/线路连接

在 Highcharts 里如何创建

Highcharts 里用 networkgraph 图表类型来做力导向网络图。你需要加载：

highcharts.js
modules/networkgraph.js

然后设置：

chart.type: 'networkgraph'
series.data：关系边，格式通常是 ['A', 'B'] 或 { from: 'A', to: 'B' }
plotOptions.networkgraph.layoutAlgorithm：控制力导向布局，比如 linkLength

HTML示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>力导向关系网络图 - NetworkGraph</title>
    <!-- 依赖：核心库 + networkgraph网络图模块 -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/networkgraph.js"></script>
    <style>
        #container {
            width: 100%;
            height: 80vh;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="container"></div>

<script>
Highcharts.chart('container', {
  chart: {
    type: 'networkgraph'
  },

  title: {
    text: '力导向网络图'
  },

  plotOptions: {
    networkgraph: {
      // 数据字段映射：起点、终点
      keys: ['from', 'to'],
      layoutAlgorithm: {
        enableSimulation: true, // 开启引力仿真动态布局
        linkLength: 80         // 连接线标准长度
      }
    }
  },

  series: [{
    name: '节点关联链路',
    data: [
      ['A', 'B'],
      ['A', 'C'],
      ['B', 'D'],
      ['C', 'D'],
      ['C', 'E'],
      ['D', 'F'],
      ['E', 'F']
    ]
  }]
});
</script>
</body>
</html>

Highcharts 原生内置 networkgraph 网络图模块，自带力导向物理仿真布局，仅需传入起止节点数组即可快速生成关系拓扑图，支持拖拽交互、自动平衡节点，无需引入复杂图谱框架，轻量易集成，适配各类实体关联可视化场景。

本力导向网络图案例展现 Highcharts 轻量化关系图谱可视化能力，解决传统可视化中拓扑图开发成本高、布局算法复杂、依赖重型图谱库的痛点：

原生内置拓扑模块，零额外重型依赖 仅引入独立 networkgraph.js 模块即可运行，不依赖 D3、G6 等大型图谱框架，打包体积小，适配后台、大屏、移动端页面。
开箱即用物理引力布局算法内置完整力导向仿真引擎，自动实现节点斥力、连线引力，页面初始化自动动画收敛，开发人员无需实现复杂布局数学计算。
极简数据接入规范统一 from/to 二元数组格式，后端只需输出成对关联数据，无需构造复杂节点、边双层结构，对接成本极低。
完善原生交互体系支持自由拖拽节点、悬浮高亮关联链路、缩放平移画布，所有交互逻辑底层封装，无需自行监听鼠标事件。
高度可扩展自定义可自定义节点大小、节点颜色、线条粗细、虚线样式、分组聚类、中心权重，轻松适配知识图谱、服务链路、组织架构等差异化业务需求。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

highcharts