Highcharts Network Graph链接标签显示异常问题求助

问题现象 #

• Highcharts Network Graph中部分链接标签（如A点与C点之间的'test 2'）无法正常显示
• 图表初始化时所有标签存在，但渲染完成后部分标签逐渐消失
• 排查发现问题与JavaScript箭头函数的使用相关，移除箭头函数后标签可正常显示

解决方案 #

通过调整布局算法配置和数据标签属性，确保所有链接标签稳定显示，同时修正箭头函数的使用方式：

Highcharts.chart('container', {
    chart: {
        type: 'networkgraph',
        marginTop: 80,
        backgroundColor: '#343a40'
    },
    title: {
        text: 'Network graph',
        style: {
            color: 'white'
        }
    },
    subtitle: {
        text: 'A Force-Directed Network Graph',
        style: {
            color: 'white'
        }
    },
    plotOptions: {
        networkgraph: {
            keys: ['from', 'to', 'clabel'],
            layoutAlgorithm: {
                enableSimulation: true,
                integration: 'verlet',
                maxIterations: 250,
                linkLength: 250,
                // 固定链接强度，避免布局过度调整导致标签偏移
                linkStrength: function (link) {
                    return 1;
                }
            },
            point: {
                events: {}
            },
            colors: []
        }
    },
    series: [{
        id: 'language-tree',
        dataLabels: {
            enabled: true,
            shadow: false,
            bold: false,
            color: 'white',
            style: {
                textOutline: 'none'
            },
            allowedOverlap: true, // 强制显示所有标签，不自动隐藏重叠项
            linkFormat: '{point.clabel}',
            y: -16
        },
        link: {
            color: 'white',
            width: 1
        },
        marker: {
            enabled: true,
            radius: 12
        },
        nodes: [
            {'id': 'A'},
            {'id': 'B'},
            {'id': 'C'}
        ],
        data: [
            ['A', 'B', 'test 1'],
            ['A', 'C', 'test 2']
        ]
    }]
});

关键修改说明 #

1. allowedOverlap: true：默认false会自动隐藏可能重叠的标签，改为true强制显示所有链接标签
2. 添加linkStrength普通函数：固定链接强度，避免布局算法模拟过程中节点位置过度波动，导致标签偏移或消失
3. 合并重复配置：移除原代码中dataLabels内重复的style定义，避免配置冲突

箭头函数问题修复 #

若代码中使用箭头函数处理布局相关逻辑（如linkStrength），箭头函数会改变this指向，导致Highcharts无法正确获取链接上下文，进而影响标签渲染。需将箭头函数替换为普通函数：

错误示例：

linkStrength: (link) => {
    return 1;
}

正确示例：

linkStrength: function(link) {
    return 1;
}

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