Highcharts打包气泡图系列名称溢出处理：添加省略号并限制在气泡内

有两种可靠方式实现需求，分别是CSS样式控制和Highcharts配置内格式化处理：

方法一：通过CSS样式实现 #

直接为气泡标签元素添加文本溢出控制样式，无需修改图表逻辑：

.highcharts-data-label text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 80px !important; /* 根据气泡实际大小调整合适宽度 */
}

该方式会自动截断超出宽度的文本并显示省略号，tooltip默认会加载完整系列名称，无需额外配置。

方法二：通过Highcharts的dataLabels格式化函数处理 #

如果需要更灵活的截断逻辑，可在图表配置的dataLabels中自定义formatter函数，手动控制文本显示：

plotOptions: {
    packedbubble: {
        dataLabels: {
            enabled: true,
            formatter: function() {
                const maxLength = 20; // 自定义允许显示的最大字符数
                const name = this.point.name;
                return name.length > maxLength ? name.substring(0, maxLength) + '...' : name;
            },
            style: {
                whiteSpace: 'nowrap'
            }
        }
    }
},
tooltip: {
    formatter: function() {
        return `<b>${this.point.name}</b><br/>数值: ${this.point.value}`;
    }
}

这种方法能精准控制截断字符数，tooltip中直接返回完整名称即可。

注意事项 #

• 调整CSS的max-width或formatter里的maxLength时，需根据气泡实际大小适配，避免截断过度或仍有溢出；
• CSS方式中!important是为了覆盖Highcharts默认行内样式，确保自定义样式生效。

内容的提问来源于stack exchange，提问作者Ant's