使用useHTML的图表标题首次加载时格式显示异常

问题场景 #

用HTML图片作为Highcharts标题时，首次加载无法正确左对齐，只有调整浏览器窗口大小后才恢复正常：

title: {
    useHTML: true,
    text: "<img src='https://abload.de/img/logo0tjrw.png' alt='' />",
    align: 'left'
},

• 首次加载效果：
  
• 调整窗口后效果：
  

问题原因 #

启用useHTML: true后，Highcharts会将标题渲染为HTML元素，但首次渲染时图片可能还未加载完成，导致Highcharts无法正确获取图片尺寸，进而计算出错误的标题位置。窗口resize时Highcharts会重新计算布局，因此能显示正常。

解决方案 #

方案1：给图片设置固定尺寸

直接在img标签中指定width和height，让Highcharts提前明确元素大小，避免布局计算错误：

title: {
    useHTML: true,
    text: "<img src='https://abload.de/img/logo0tjrw.png' alt='' width='120' height='40' />",
    align: 'left'
},

方案2：图片加载完成后触发重绘

监听图片的load事件，确保图片加载完成后再让Highcharts重绘布局，精准解决问题：

// 初始化图表
var chart = Highcharts.chart('container', {
    title: {
        useHTML: true,
        text: "<img id='chart-title-logo' src='https://abload.de/img/logo0tjrw.png' alt='' />",
        align: 'left'
    },
    // 其他图表配置...
});

// 处理图片加载后的重绘
var logoElement = document.getElementById('chart-title-logo');
if (logoElement.complete) {
    // 图片已加载完成，直接重绘
    chart.redraw();
} else {
    // 监听图片加载事件
    logoElement.addEventListener('load', function() {
        chart.redraw();
    });
}

方案3：延迟触发重绘

如果不想监听图片加载，也可以设置一个短延迟，等图片大概率加载完成后再重绘：

var chart = Highcharts.chart('container', {
    // 图表配置...
    title: {
        useHTML: true,
        text: "<img src='https://abload.de/img/logo0tjrw.png' alt='' />",
        align: 'left'
    }
});

// 延迟100ms重绘，确保图片加载
setTimeout(() => chart.redraw(), 100);

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