如何修改Highcharts网络图节点形状？实现不同类型节点区分

当然可以！Highcharts 完全支持自定义网络图的节点形状，不管是统一改成方形，还是根据节点类型设置不同形状来做区分，都有很直观的实现方式，下面给你具体的方案和代码示例：

一、统一将所有节点设置为方形 #

只需要在 plotOptions.networkgraph.node 中指定 symbol: 'square' 即可，这个配置会全局应用到所有节点：

Highcharts.chart('container', {
    chart: {
        type: 'networkgraph'
    },
    plotOptions: {
        networkgraph: {
            node: {
                symbol: 'square', // 全局设置节点为方形
                radius: 10 // 可按需调整节点大小
            }
        }
    },
    series: [{
        dataLabels: {
            enabled: true,
            format: '{point.id}'
        },
        nodes: [
            { id: '节点1' },
            { id: '节点2' },
            { id: '节点3' }
        ],
        data: [
            ['节点1', '节点2'],
            ['节点2', '节点3'],
            ['节点3', '节点1']
        ]
    }]
});

二、按节点类型区分不同形状 #

如果需要给不同类型的节点设置不同形状，只需要在每个节点的配置对象中单独指定 symbol 属性即可。Highcharts 内置了多种常用形状，比如 circle（圆形，默认）、square（方形）、triangle（三角形）、diamond（菱形）等，你可以根据节点类型对应设置：

Highcharts.chart('container', {
    chart: {
        type: 'networkgraph'
    },
    series: [{
        dataLabels: {
            enabled: true,
            format: '{point.id}'
        },
        nodes: [
            { id: '类型A节点', type: 'typeA', symbol: 'square' }, // 类型A用方形
            { id: '类型B节点', type: 'typeB', symbol: 'circle' }, // 类型B用圆形
            { id: '类型C节点', type: 'typeC', symbol: 'triangle' }, // 类型C用三角形
            { id: '类型D节点', type: 'typeD', symbol: 'diamond' } // 类型D用菱形
        ],
        data: [
            ['类型A节点', '类型B节点'],
            ['类型B节点', '类型C节点'],
            ['类型C节点', '类型D节点'],
            ['类型D节点', '类型A节点']
        ]
    }]
});

如果内置形状不够用，你还可以自定义SVG路径作为节点形状，比如：

{ id: '自定义节点', symbol: 'M 0 -10 L 10 0 L 0 10 L -10 0 Z' } // 自定义菱形路径

这样就能轻松通过节点形状区分不同类型的节点啦！

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