Highcharts导出含HTML标签的图片异常：CSS样式未生效

问题现象 #

• 页面渲染时，x轴标签的HTML样式显示正常（"Test 1"和"Test 2"分行显示）
• 导出图片时，CSS样式失效，两个文本挤在同一行
• 已配置xAxis.labels.useHTML: true和exporting.allowHTML: true

问题原因 #

导出图片时Highcharts会创建新的图表实例，当前配置仅在exporting.chartOptions.xAxis中开启了allowHTML，但未同步设置labels.useHTML: true，导致导出实例未启用HTML标签解析，样式无法生效。

修正后的配置代码 #

exporting: {
    enabled: true,
    allowHTML: true,
    chartOptions: {
        chart: {
            height: 400,
            width: 1000
        },
        xAxis: {
            allowHTML: true,
            labels: {
                useHTML: true // 导出配置中必须同步开启该选项
            }
        }
    }
}

额外注意事项 #

• 若使用外部CSS定义样式，建议改为内联样式（如<div style="display: block;">Test 1</div>），确保导出时样式能被临时DOM环境正确读取
• 导出实例的配置是独立的，所有影响显示的关键配置都需要在exporting.chartOptions中完整复写

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