如何隐藏Highcharts树形图中溢出节点边界的数据标签？

嗨，我完全懂你遇到的困扰——Highcharts默认的crop和overflow选项是针对整个图表容器的，根本不会考虑单个节点的边界，所以那些设置对你的需求完全没用。要实现标签超出节点本身就隐藏的效果，我们得手动计算节点和标签的尺寸，自己控制显示逻辑。

下面是具体的实现方案：

• 首先，禁用默认的裁剪和溢出处理，让标签完整渲染出来，方便我们后续判断：
  设置dataLabels.crop: false和dataLabels.overflow: "none"。

• 然后，利用dataLabels.formatter函数，在渲染每个标签时，对比文本总宽度（含内边距）和节点宽度：
  我们可以通过this.point.shapeArgs.width获取当前节点的宽度，用this.chart.renderer.measureText()计算文本的实际宽度，再加上标签左右内边距的总和，和节点宽度做对比。如果文本总宽度超过节点宽度，就返回空字符串隐藏标签，否则返回节点名称。

完整的代码示例如下：

Highcharts.chart('container', {
    series: [{
        type: 'treemap',
        data: [
            { name: 'A', value: 6 },
            { name: 'B', value: 6 },
            { name: 'C', value: 4 },
            { name: 'D', value: 3 },
            { name: 'E', value: 2 },
            { name: 'F', value: 2 },
            { name: 'Gggggg', value: 1 }
        ],
        dataLabels: {
            enabled: true,
            crop: false,
            overflow: 'none',
            // 如果你自定义了内边距，记得下面的labelPadding要对应修改
            padding: 5,
            formatter: function() {
                const nodeWidth = this.point.shapeArgs.width;
                const labelPadding = this.options.padding;
                // 计算文本总宽度：文本本身宽度 + 左右内边距
                const totalTextWidth = this.chart.renderer.measureText(this.point.name).width + labelPadding * 2;

                // 判断是否超出节点边界，超出则隐藏标签
                return totalTextWidth > nodeWidth ? '' : this.point.name;
            }
        }
    }]
});

这个方案的核心是绕过Highcharts默认的容器级裁剪逻辑，直接针对每个节点做尺寸判断，完美匹配你要的“标签超出对应节点边界就隐藏”的需求。

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