Django如何传递数据表信息给JavaScript生成Highcharts网络图

1. 后端视图逻辑处理 #

首先在Django视图中查询接口数据，按拓扑顺序提取主机名，生成符合Highcharts要求的边关系数组：

• 按Interface字段排序查询所有接口记录，保证链路顺序和拓扑一致（AE1→AE2→AE3...）
• 提取所有记录的Hostname字段组成有序主机列表
• 遍历主机列表，将相邻两个主机组成二元组，生成最终的连接关系数据
• 把数据序列化后传给模板

视图代码示例（views.py）：

from django.shortcuts import render
import json
from .models import interfaceModel

def network_topology(request):
    # 按接口名排序查询所有记录
    interfaces = interfaceModel.objects.all().order_by('Interface')
    # 提取有序主机名列表
    host_list = [iface.Hostname for iface in interfaces]
    # 生成相邻节点连接关系
    edge_list = []
    for i in range(len(host_list) - 1):
        edge_list.append([host_list[i], host_list[i+1]])
    # 序列化后传入模板
    context = {
        'edge_data': json.dumps(edge_list)
    }
    return render(request, 'topology.html', context)

注意：如果存在AE10、AE2这类非自然数字排序的接口名，需要自定义排序规则提取接口数字序号排序，避免链路顺序错乱。

2. 前端模板渲染修改 #

在HTML模板中直接解析后端传入的连接数据，替换原有硬编码的data数组即可，不需要额外编写JS循环逻辑。
模板代码示例（topology.html）：

<style>
#container {
    background: #1f1f1f;
    min-width: 320px;
    max-width: 800px;
    margin: 0 auto;
    height: 600px;
  } 
</style>  
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<div id="container"></div>
<script>
// 解析后端传入的拓扑连接数据
const topologyData = JSON.parse('{{ edge_data|safe }}');

Highcharts.chart('container', {
    chart: {
      type: 'networkgraph',
      marginTop: 80
    },
    title: {
      text: '串行网络拓扑'
    },
    plotOptions: {
      networkgraph: {
        keys: ['from', 'to'],
        layoutAlgorithm: {
          enableSimulation: false // 关闭物理模拟，保证节点按串行直线排列无交叉
        }
      }
    },
    series: [{
      marker: {
        radius: 30
      },
      dataLabels: {
        enabled: true,
        linkFormat: '',
        allowOverlap: true
      },
      data: topologyData // 替换原有硬编码数据
    }]
  });
</script>

补充说明 #

• 模板中必须给edge_data加|safe过滤器，避免Django自动转义JSON中的引号导致JS解析报错
• 关闭enableSimulation配置是为了避免Highcharts默认的力导向布局打乱串行直连的展示效果
• 如果需要展示接口IP、接口名等额外信息，可以在后端序列化时把节点、链路的附加属性一并传入，在Highcharts的dataLabels、tooltip配置中读取展示
• 如果主机顺序和接口查询顺序不匹配，需要在查询时增加排序字段（比如设备跳数、自定义排序权重），保证主机列表顺序和实际拓扑A→B→C→D→E→F完全一致

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