求助：如何让Highcharts图表中重叠/邻近数据点的标签全部显示

架构老林

2026-7-2

解决Highcharts 6.0.7柱状图数据标签重叠/显示异常问题

需求说明

使用Highcharts 6.0.7版本生成柱状图时，要求：

无论图表手动/自动设置的最大高度如何
当系列数据点邻近或重叠时，所有数据标签都能正常显示（无裁剪、无重叠）

解决方案

通过配置plotOptions.column.dataLabels的核心参数，强制数据标签完整显示并自动避免重叠：

enabled: true：开启数据标签显示
crop: false：禁止裁剪超出图表区域的标签
overflow: "none"：允许标签溢出容器，不自动隐藏
allowOverlap: false：自动调整标签位置，避免重叠
可额外配置align和verticalAlign优化标签的默认位置

修改后的完整代码

Highcharts.chart('container', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
        column: { // 针对柱状图配置数据标签规则
            dataLabels: {
                enabled: true,
                crop: false,
                overflow: "none",
                allowOverlap: false,
                align: "center",
                verticalAlign: "top"
            }
        },
        series: {
            cursor: 'pointer',
            events: {
                click: function () {
                    alert('You just clicked the graph');
                }
            }
        }
    },
    series: [{
        name: 'Series 1',
        data: [30, 75, 110, 130, 140, 170, 140, 150, 210, 200, 100, 60]
    }, {
        name: 'Series 2',
        data: [40, 80, 100, 120, 150, 171, 145, 140, 130, 110, 90, 70]
    }]
});