如何在Chart.js雷达图中用图片替换顶点标签？

要实现用图片替换雷达图的顶点标签，你需要定位到雷达图刻度（scale）的顶点标签位置，而非数据集的数据点位置，同时隐藏默认的文字标签。以下是修正后的实现：

核心修正要点 #

• 隐藏默认文字标签，避免与图片重叠
• 获取雷达图刻度的顶点坐标（而非数据点坐标）来绘制图片
• 处理图片异步加载问题，确保绘制时图片已加载完成

完整代码 #

// 预加载图片，解决异步加载导致的绘制失败问题
const loadImages = (imageUrls) => {
  return Promise.all(imageUrls.map(url => {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = () => resolve(img);
      img.onerror = reject;
      img.src = url;
    });
  }));
};

const images1 = ['https://i.sstatic.net/2RAv2.png', 'https://i.sstatic.net/Tq5DA.png', 'https://i.sstatic.net/3KRtW.png', 'https://i.sstatic.net/iLyVi.png', 'https://i.sstatic.net/Tq5DA.png'];

// 预加载图片后初始化图表
loadImages(images1).then(loadedImages => {
  const radarChart = new Chart('chart', {
    type: 'radar',
    plugins: [{
      id: 'custom_image_labels',
      afterDraw: (chart) => {
        const ctx = chart.ctx;
        const scale = chart.scales.r; // 获取雷达图刻度对象
        
        if (!scale) return;
        
        // 遍历每个顶点标签位置，绘制对应图片
        scale.pointLabels.forEach((_, index) => {
          // 获取顶点标签的坐标
          const { x, y } = scale.getPointPosition(index, scale.max);
          const img = loadedImages[index];
          
          // 让图片中心对齐标签位置
          const drawX = x - img.width / 2;
          const drawY = y - img.height / 2;
          
          ctx.drawImage(img, drawX, drawY);
        });
      }
    }],
    data: dataChart, // 确保你的dataChart已正确定义
    options: {
      responsive: false,
      elements: {
        line: {
          borderWidth: 4,
        },
      },
      aspectRatio: 2,
      scales: {
        r: {
          pointLabels: {
            display: false, // 隐藏默认文字标签
          },
        },
      },
      plugins: {
        legend: {
          labels: {
            font: {
              size: 20,
              weight: 'bold',
            },
          },
        },
      },
    },
  });
}).catch(error => {
  console.error('图片加载失败:', error);
});

<canvas class="chart" width="500" height="500" id="chart"></canvas>

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