如何阻止Highcharts中X轴图标在屏幕缩小时被隐藏？

要确保小屏幕下图标不消失，或者仅裁剪超出图表范围的图标，需要调整Highcharts的X轴标签配置，关闭自动隐藏逻辑，具体方案如下：

关键配置说明 #

• xAxis.labels.step: 1：强制显示所有X轴标签，禁止Highcharts自动跳过部分标签来避免重叠（这是你之前尝试无效的核心原因）
• xAxis.labels.crop: false：禁止裁剪超出图表容器的标签内容
• xAxis.labels.overflow: "allow"：允许标签内容超出图表范围显示
• xAxis.labels.autoRotation: []：关闭标签自动旋转，避免图标被旋转影响显示

修改后的完整代码 #

chart1 = new Highcharts.Chart({
    chart: {
        type: 'column',
        // zoomType: 'xy',
    },
    title: {
        text: 'Title'
    },
    xAxis: {
        categories: $.map(months, function (item) {
            return item;
        }),
        labels: {
            useHTML: true,
            step: 1, // 强制显示所有标签
            crop: false, // 不裁剪超出的标签
            overflow: "allow", // 允许标签溢出
            autoRotation: [], // 关闭自动旋转
            // padding: 1, 可根据需要调整
            formatter: function() {
                let arrayIcon = {};
                $.map(months, function (item) {
                    arrayIcon[item] = '<img src="icon_' + item + '.png" height="20">';
                });
                return arrayIcon[this.value];
            },
        },
        // zoomEnabled: false
    },
    yAxis: {
        title: {
            text: 'Sub-title'
        }
    },
    plotOptions: {
        column: {
            states: {
                inactive: {
                    enabled: false
                }
            }
        }
    },
    series: [{
        name: 'Dev #1',
        data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
    }, {
        name: 'Dev #2',
        data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
    }]
});

可选调整：仅隐藏超出图表范围的图标 #

如果需求是仅裁剪超出图表容器的部分，不自动隐藏整个图标，只需将crop设为true，其他配置保持不变：

labels: {
    // ...其他配置
    crop: true,
    overflow: "allow"
}

这样配置后，图标不会被整体隐藏，只有超出图表范围的部分会被裁剪，同时所有标签都会被强制显示。

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