ChartJS实现Y轴显示图片时遇到问题求助

问题原因分析 #

• 直接返回Image DOM对象无效：ChartJS的刻度回调函数ticks.callback仅接受字符串（支持HTML格式），返回DOM对象会被自动转为字符串[Object HTMLImageElement]。
• img.onload未触发：创建的Image对象没有挂载到DOM中，回调执行后对象会被销毁，导致onload事件无法触发；且即便触发，也无法影响已返回的结果。

修正后的代码 #

将创建Image对象的逻辑替换为直接返回HTML格式的<img>标签字符串，在标签内直接指定宽高和图片路径：

yAxes: [{
  display: true,
  scaleLabel: {
    display: false,
  },
  ticks: {
    min: 0,
    max: MaxLength,
    stepSize: 1,
    callback: (value) => {
      if (value !== 0) {
        // 返回HTML img标签字符串，直接设置宽高和图片路径
        return `<img src="${getimagePath(value)}" width="4" height="4" />`;
      }
      return ``;
    },
  },
  gridLines: {
    display: false,
  }
}]

额外优化建议 #

如果图片加载慢导致刻度位置出现空白，可以提前预加载所有需要的图片：

// 预加载Y轴所需图片
const preloadYAxisImages = () => {
  for (let i = 1; i <= MaxLength; i++) {
    const img = new Image();
    img.src = getimagePath(i);
  }
};
// 初始化图表前调用预加载
preloadYAxisImages();

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