使用Chart.js背景图片插件无法显示完整图片的问题

问题核心在于你当前基于chartArea（图表绘图区域）绘制背景图，但chartArea的高度可能小于图片高度，且受限于图表刻度范围或画布尺寸，导致图片被裁剪。以下是针对性解决方案：

1. 改用整个Canvas区域绘制图片 #

放弃使用chart.chartArea，直接基于整个canvas元素的尺寸定位绘制图片，确保图片能利用画布全部空间：

修改自定义插件的beforeDraw逻辑：

const custplugin = {
  id: 'custplugin',
  beforeDraw: (chart) => {
    if (image.complete) {
      const ctx = chart.ctx;
      // 获取整个canvas的尺寸，而非仅绘图区域
      const { width: canvasWidth, height: canvasHeight } = chart.canvas;
      
      // 方案1：直接居中绘制原始尺寸图片（需确保canvas尺寸足够容纳）
      const x = (canvasWidth - image.width) / 2;
      const y = (canvasHeight - image.height) / 2;
      ctx.drawImage(image, x, y);

      // 方案2：按比例缩放图片适配canvas（避免裁剪，推荐）
      // const scale = Math.min(canvasWidth / image.width, canvasHeight / image.height);
      // const scaledWidth = image.width * scale;
      // const scaledHeight = image.height * scale;
      // const x = (canvasWidth - scaledWidth) / 2;
      // const y = (canvasHeight - scaledHeight) / 2;
      // ctx.drawImage(image, x, y, scaledWidth, scaledHeight);
    } else {
      image.onload = () => chart.draw();
    }
  }
};

2. 确保Canvas尺寸配置正确 #

检查canvas元素的实际像素尺寸（width/height属性）和CSS显示尺寸是否匹配，避免因尺寸不匹配导致拉伸或裁剪：

<!-- 示例：设置canvas实际像素尺寸与显示尺寸一致 -->
<canvas id="pie-chart" width="800" height="600" style="width:800px; height:600px;"></canvas>

同时调整图表配置的maintainAspectRatio和responsive：
若不需要响应式缩放，保持responsive: false，但需确保canvas固定尺寸足够容纳图片；若需要响应式，开启responsive: true并让maintainAspectRatio匹配图片宽高比：

const config = {
  type: 'scatter',
  data: data,
  responsive: true, // 按需开启响应式
  maintainAspectRatio: image.width / image.height, // 匹配图片宽高比
  // ...其他配置
};

3. 移除冗余代码 #

删除代码中重复注册的空插件：

// 删除此行冗余代码
Chart.register({ id: 'custplugin' });

修改后的完整代码示例 #

Chart.register(ChartDataLabels);

let dbstates = '["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Washington D.C.","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana"]';
let xcoord = '[{"x":"10","y":"1","label":"AL"},{"x":"10","y":"2","label":"AK"},{"x":"5","y":"5","label":"AZ"},{"x":"5","y":"15","label":"AR"},{"x":"15","y":"5","label":"CA"},{"x":"20","y":"1","label":"CO"},{"x":"3","y":"3","label":"CT"}]';
let myChart;

(async function() {
  const isTest = false;
  let onDrag = undefined;
  let jsonmap = JSON.parse(xcoord);

  const image = new Image();
  image.src = 'images/ECOS-Southside-booths1.jpg';

  const custplugin = {
    id: 'custplugin',
    beforeDraw: (chart) => {
      if (image.complete) {
        const ctx = chart.ctx;
        const { width: canvasWidth, height: canvasHeight } = chart.canvas;
        
        // 使用按比例缩放方案，确保图片完整显示
        const scale = Math.min(canvasWidth / image.width, canvasHeight / image.height);
        const scaledWidth = image.width * scale;
        const scaledHeight = image.height * scale;
        const x = (canvasWidth - scaledWidth) / 2;
        const y = (canvasHeight - scaledHeight) / 2;
        ctx.drawImage(image, x, y, scaledWidth, scaledHeight);
      } else {
        image.onload = () => chart.draw();
      }
    }
  };

  const data = {
    labels: JSON.parse(dbstates),
    datasets: [{
      label: 'Location',
      data: jsonmap,
      backgroundColor: 'rgb(255, 99, 132)',
      pointHitRadius: 5,
    }],
  };

  const config = {
    type: 'scatter',
    data: data,
    responsive: false,
    maintainAspectRatio: true,
    plugins: [custplugin],
    options: {
      animation: false,
      layout: { padding: { left: 0, right: 0, top: 0, bottom: 0 } },
      scales: {
        x: { display: false },
        y: { display: false }
      },
      elements: {
        point: { radius: 10, hoverRadius: 15 }
      }
    }
  };

  const ctx = document.getElementById('pie-chart');
  myChart = new Chart(ctx, config);
})();

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