Highcharts组织架构图如何调整节点框内图片大小与位置

核心调整思路 #

• 利用已开启的useHTML: true配置，通过dataLabels.formatter自定义节点内部渲染结构，完全控制图片、文字的尺寸和位置
• 移除原配置中无效的series.style.padding: 1000参数，该参数无法作用于节点内部元素

修改后的series配置代码 #

series: [
    {
        type: "organization",
        name: "",
        keys: ["from", "to"],
        data: [
            ["A", "B"],
            ["A", "C"],
            ["A", "D"],
            ["A", "E"],
            ["A", "F"],
            ["A", "G"],
        ],
        nodes: [
            {
                id: "A",
                title: "CEO",
                name: "john doe",
                image: "https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131126/Highsoft_03862_.jpg",
            },
            { id: "B" },
            { id: "C" },
            { id: "D", column: 2, color: "#333333" },
            { id: "E", column: 2 },
            { id: "F", column: 2 },
            { id: "G", column: 2 },
        ],
        colorByPoint: true,
        color: "#007ad0",
        useHTML: true,
        dataLabels: {
            color: "white",
            formatter: function() {
                const point = this.point;
                if (!point.image) return `${point.id}`;
                // 自定义渲染结构，可根据需求调整布局
                return `
                <div class="org-node-inner">
                    <img src="${point.image}" class="org-node-avatar" />
                    <div class="org-node-text">
                        <div class="org-node-name">${point.name}</div>
                        <div class="org-node-title">${point.title}</div>
                    </div>
                </div>
                `
            }
        },
        borderColor: "white",
        nodeWidth: 180, // 调整节点宽度适配自定义布局
    },
],

配套CSS样式 #

.org-node-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    width: 100%;
    box-sizing: border-box;
}
.org-node-avatar {
    width: 48px; /* 自定义图片宽度 */
    height: 48px; /* 自定义图片高度 */
    object-fit: cover;
    border-radius: 4px; /* 可根据需求调整圆角 */
}
.org-node-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.org-node-name {
    font-size: 14px;
    font-weight: bold;
}
.org-node-title {
    font-size: 12px;
    opacity: 0.9;
}

如果不需要左图右文的布局，直接修改CSS里的org-node-inner的布局方式即可，比如设置为flex-direction: column就能实现图片在上、文字在下的效果，调整图片宽高、边距都可以直接修改对应CSS属性。

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