如何为Highcharts组织架构图的连接线添加自定义标签

要给组织结构图的连接线添加自定义百分比标签，核心是利用Highcharts的渲染能力直接在连线上绘制文本，或通过数据配置直接定义标签。以下是具体实现方法：

1. 优先尝试：直接在数据配置中定义标签 #

如果你的Highcharts版本支持link.label配置，这是最简洁的方式。在series.data里给每个节点连接添加标签属性：

series: [{
    type: 'organization',
    keys: ['from', 'to'],
    data: [
        ['CTO', 'Web devs, sys admin', {
            link: {
                label: {
                    text: '50%',
                    style: { fontSize: '12px', fontWeight: 'bold' }
                }
            }
        }],
        ['CTO', 'product developers', {
            link: {
                label: {
                    text: '40%',
                    style: { fontSize: '12px', fontWeight: 'bold' }
                }
            }
        }],
        ['CTO', 'marketing team', {
            link: {
                label: {
                    text: '10%',
                    style: { fontSize: '12px', fontWeight: 'bold' }
                }
            }
        }]
    ],
    // 其他系列配置
}]

2. 兼容方案：通过渲染器绘制标签 #

如果版本不支持link.label，可以在图表加载完成后，用Highcharts的Renderer手动在连接线中间绘制文本：

chart: {
    type: 'organization',
    events: {
        load: function() {
            const chart = this;
            // 遍历所有连接线
            chart.series[0].links.forEach((link, index) => {
                // 获取连接线的路径坐标，计算中点
                const path = link.path;
                const x1 = path[1][1];
                const y1 = path[1][2];
                const x2 = path[2][1];
                const y2 = path[2][2];
                const midX = (x1 + x2) / 2;
                const midY = (y1 + y2) / 2;

                // 定义对应标签文本
                const labels = ['50%', '40%', '10%'];

                // 绘制文本标签
                chart.renderer.text(
                    labels[index],
                    midX,
                    midY - 10 // 向上偏移避免遮挡连接线
                )
                .css({
                    fontSize: '12px',
                    fontWeight: 'bold',
                    fill: '#333'
                })
                .add();
            });
        }
    }
}

完整示例代码 #

<!DOCTYPE html>
<html>
<head>
    <title>带连接线标签的组织架构图</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/organization.js"></script>
</head>
<body>
    <div id="container" style="width: 800px; height: 600px;"></div>

    <script>
        Highcharts.chart('container', {
            chart: {
                type: 'organization',
                events: {
                    load: function() {
                        const chart = this;
                        const labels = ['50%', '40%', '10%'];
                        chart.series[0].links.forEach((link, index) => {
                            const path = link.path;
                            const x1 = path[1][1];
                            const y1 = path[1][2];
                            const x2 = path[2][1];
                            const y2 = path[2][2];
                            const midX = (x1 + x2) / 2;
                            const midY = (y1 + y2) / 2;

                            chart.renderer.text(
                                labels[index],
                                midX,
                                midY - 10
                            )
                            .css({
                                fontSize: '12px',
                                fontWeight: 'bold',
                                fill: '#333'
                            })
                            .add();
                        });
                    }
                }
            },
            title: {
                text: '公司组织架构'
            },
            series: [{
                type: 'organization',
                name: '团队结构',
                data: [
                    ['CTO', 'Web devs, sys admin'],
                    ['CTO', 'product developers'],
                    ['CTO', 'marketing team']
                ],
                nodes: [{
                    id: 'CTO',
                    name: 'CTO'
                }, {
                    id: 'Web devs, sys admin',
                    name: 'Web开发&系统运维'
                }, {
                    id: 'product developers',
                    name: '产品开发'
                }, {
                    id: 'marketing team',
                    name: '营销团队'
                }]
            }]
        });
    </script>
</body>
</html>

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