Chart.js中如何将图片作为pointStyle并按fit/fill方式缩放？

Chart.js原生使用Image作为pointStyle时，只会直接拉伸/压缩图片到pointRadius或对应尺寸，没法实现类似CSS object-fit的适配效果。要实现fit（contain，完整显示）或fill（cover，填满裁剪）模式，得通过自定义插件重写数据点的绘制逻辑：

核心思路 #

利用Chart.js的插件机制拦截数据点绘制流程，通过Canvas的drawImage多参数版本控制图片绘制区域，根据图片和目标尺寸的比例计算适配后的绘制位置与大小，实现不同的适配模式。

实现步骤 #

1. 编写适配计算工具函数 #

这个函数负责根据图片原始尺寸、目标尺寸和适配模式，算出图片的绘制参数：

function getDrawImageParams(img, targetWidth, targetHeight, mode = 'fit') {
  const imgRatio = img.width / img.height;
  const targetRatio = targetWidth / targetHeight;
  let drawWidth, drawHeight, offsetX, offsetY;

  if (mode === 'fit') {
    // 保持比例，完整显示在目标区域内
    if (imgRatio > targetRatio) {
      drawWidth = targetWidth;
      drawHeight = targetWidth / imgRatio;
    } else {
      drawHeight = targetHeight;
      drawWidth = targetHeight * imgRatio;
    }
  } else if (mode === 'fill') {
    // 保持比例，填满目标区域，超出部分裁剪
    if (imgRatio > targetRatio) {
      drawHeight = targetHeight;
      drawWidth = targetHeight * imgRatio;
    } else {
      drawWidth = targetWidth;
      drawHeight = targetWidth / imgRatio;
    }
  } else {
    // 默认和原生行为一致，直接拉伸
    drawWidth = targetWidth;
    drawHeight = targetHeight;
  }

  // 计算居中偏移量，让图片在目标区域内居中
  offsetX = (targetWidth - drawWidth) / 2;
  offsetY = (targetHeight - drawHeight) / 2;

  return [drawWidth, drawHeight, offsetX, offsetY];
}

2. 编写Chart.js自定义插件 #

通过插件拦截绘制流程，对Image类型的pointStyle进行自定义绘制：

const imagePointFitPlugin = {
  id: 'imagePointFit',
  afterDraw(chart) {
    chart.data.datasets.forEach((dataset, datasetIndex) => {
      const meta = chart.getDatasetMeta(datasetIndex);
      // 仅处理折线图的数据点，其他类型可自行调整判断逻辑
      if (!meta.points) return;

      meta.points.forEach((point, index) => {
        const pointStyle = dataset.pointStyle[index] || dataset.pointStyle;
        // 只处理Image对象类型的点样式
        if (!(pointStyle instanceof Image)) return;

        const ctx = chart.ctx;
        // 由pointRadius计算目标尺寸（直径）
        const targetSize = (dataset.pointRadius[index] || dataset.pointRadius) * 2;
        // 获取当前点的适配模式，支持单数据集统一设置或单个点单独设置
        const fitMode = dataset.pointFitMode[index] || dataset.pointFitMode || 'fit';
        const [drawWidth, drawHeight, offsetX, offsetY] = getDrawImageParams(
          pointStyle, targetSize, targetSize, fitMode
        );

        // 清除原生绘制的点，避免重叠
        ctx.clearRect(point.x - targetSize/2, point.y - targetSize/2, targetSize, targetSize);
        // 绘制适配后的图片
        ctx.drawImage(
          pointStyle,
          point.x + offsetX - drawWidth/2,
          point.y + offsetY - drawHeight/2,
          drawWidth,
          drawHeight
        );
      });
    });
  }
};

3. 配置并使用插件 #

注册插件后，在图表数据集里指定Image类型的pointStyle和适配模式：

// 注册自定义插件
Chart.register(imagePointFitPlugin);

// 创建图片对象，确保图片加载完成再初始化图表
const customImg = new Image();
customImg.onload = function() {
  const ctx = document.getElementById('myLineChart').getContext('2d');
  new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['一月', '二月', '三月', '四月'],
      datasets: [{
        label: '自定义图片数据点',
        data: [12, 28, 18, 35],
        pointRadius: 50, // 数据点的直径大小
        pointStyle: [customImg, customImg, customImg, customImg], // 每个点的图片
        pointFitMode: ['fit', 'fill', 'fit', 'fill'], // 单个点的适配模式
        borderColor: '#333',
        borderWidth: 2,
        // 禁用原生点的背景色，避免干扰
        backgroundColor: 'transparent'
      }]
    }
  });
};
customImg.src = './your-image.png'; // 替换为你的图片路径

补充说明 #

• 插件新增了自定义配置项pointFitMode，支持给单个数据点或整个数据集统一设置适配模式
• 如果需要单独设置数据点的宽高，可扩展插件支持pointWidth和pointHeight参数
• 必须确保图片加载完成后再初始化图表，否则会出现绘制异常

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