Chart.js散点图：如何让数据点与画布背景图缩放时保持相对位置？

问题出在你直接使用图片原始尺寸绘制，没有随图表区域（chartArea）的缩放比例调整图片大小。要让数据点和背景图始终对齐，需要让背景图按图表区域的比例等比缩放，同时确保图表的宽高比和图片一致。

修改后的插件代码 #

const custplugin = {
  id: 'custplugin',
  beforeDraw: (chart) => {
    if (image.complete) {
      const ctx = chart.ctx;
      const { top, left, width, height } = chart.chartArea;
      
      // 计算图片和图表区域的宽高比
      const imageRatio = image.width / image.height;
      const chartAreaRatio = width / height;
      
      let drawWidth, drawHeight;
      // 根据比例确定缩放后的尺寸，保证图片完整显示且比例不变
      if (chartAreaRatio > imageRatio) {
        drawHeight = height;
        drawWidth = drawHeight * imageRatio;
      } else {
        drawWidth = width;
        drawHeight = drawWidth / imageRatio;
      }
      
      // 计算居中位置
      const x = left + (width - drawWidth) / 2;
      const y = top + (height - drawHeight) / 2;
      
      // 按缩放后的尺寸绘制图片
      ctx.drawImage(image, x, y, drawWidth, drawHeight);
    } else {
      image.onload = () => chart.draw();
    }
  }
};

关键配置补充 #

1. 设置图表宽高比与图片一致
   在图表配置中，将maintainAspectRatio设为true，并通过aspectRatio指定和图片相同的比例：

   const chartConfig = {
     // ...其他配置
     responsive: true,
     maintainAspectRatio: true,
     aspectRatio: image.width / image.height, // 图片的宽高比
     plugins: {
       custplugin: {}
     }
   };
   

   这样图表会始终保持和图片一致的宽高比，避免窗口缩放时chartArea的比例变化导致图片拉伸或偏移。

2. 确保容器不强制宽高
   不要给图表的容器元素设置固定的宽高（除非你明确需要），让容器随窗口缩放，Chart.js的responsive配置会自动调整图表尺寸。

原理说明 #

• 先计算图片和chartArea的宽高比，选择合适的缩放比例，保证图片在chartArea内等比显示，不会拉伸变形。
• 通过aspectRatio让图表始终保持和图片一致的比例，这样窗口缩放时，chartArea的宽高变化比例和图片缩放比例完全匹配，数据点的位置就会和背景图保持相对固定。

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