Highcharts 9版本Network Graph显示异常问题求助

你的代码在Highcharts 7中正常运行，但升级到9版本后所有节点挤在左上角，核心原因是chart对象下的layoutAlgorithm配置在Highcharts 9中与网络图的专属布局配置产生冲突，导致布局模拟未正常执行，所有节点默认落在(0,0)位置。

修正后的代码 #

import Highcharts from 'highcharts';
import HighchartsNetworkgraph from 'highcharts/modules/networkgraph';

// 初始化网络图模块
HighchartsNetworkgraph(Highcharts);

// 网络图示例数据
const data = [
    ['A', 'B'],
    ['A', 'C'],
    ['B', 'D'],
    ['C', 'D'],
    ['D', 'E'],
    ['E', 'F'],
    ['F', 'A']
];

// 创建图表
Highcharts.chart('container', {
    chart: {
        type: 'networkgraph'
        // 移除此处的layoutAlgorithm配置，避免冲突
    },
    title: {
        text: '基础网络图'
    },
    plotOptions: {
        networkgraph: {
            keys: ['from', 'to'],
            layoutAlgorithm: {
                enableSimulation: true
            }
        }
    },
    series: [{
        dataLabels: {
            enabled: true,
            linkFormat: ''
        },
        data: data
    }]
});

关键改动说明 #

• 移除chart对象下的layoutAlgorithm配置：Highcharts 9对网络图的布局配置做了更严格的划分，全局的chart.layoutAlgorithm会干扰networkgraph专属的布局逻辑，直接导致模拟计算失效。
• 保留plotOptions.networkgraph中的布局配置：这是网络图布局的正确配置位置，能确保布局模拟正常运行，节点坐标被正确计算。

如果容器#container未设置宽高，建议补充样式确保图表有足够渲染空间：

#container {
    width: 800px;
    height: 600px;
    margin: 0 auto;
}

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