Chartjs 3.5.0 雷达图（Radar Chart）将标签替换为图片的实现咨询

整体实现逻辑基于Chart.js 3.x版本的API设计，适配react-chartjs-2对应版本的调用规则，步骤如下：

• 提前预加载所有需要用到的自定义标签图片，避免绘制时图片未加载导致空白
• 配置雷达图的径向轴参数，关闭原生的文字标签显示，避免和自定义图片重叠
• 补全你现有插件的afterDraw逻辑，根据雷达轴返回的每个标签坐标绘制图片

完整代码示例 #

import { Radar } from 'react-chartjs-2';
import { Chart as ChartJS, RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend } from 'chart.js';

ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend);

// 提前预加载自定义标签图片，数量和你的雷达标签数量一致
const labelImages = Array.from({length: 5}, () => new Image())
// 依次设置对应标签的图片地址
labelImages[0].src = '自定义标签1的图片地址'
labelImages[1].src = '自定义标签2的图片地址'
labelImages[2].src = '自定义标签3的图片地址'
labelImages[3].src = '自定义标签4的图片地址'
labelImages[4].src = '自定义标签5的图片地址'

const RadarChart = () => {
  // 自定义绘制标签的插件
  const customLabelPlugin = [
    {
      id: "customLabel",
      afterDraw: chart => {
        const ctx = chart.ctx;
        const rScale = chart.scales.r;
        // 遍历所有标签位置绘制图片
        rScale.pointLabels.forEach((label, index) => {
          const currentImg = labelImages[index];
          if (!currentImg.complete) return; // 图片未加载完成时跳过，避免报错
          // 可根据你的图片尺寸调整宽高参数
          const imgWidth = 28;
          const imgHeight = 28;
          // 绘制图片，坐标基于原生标签位置做偏移实现居中对齐
          ctx.drawImage(
            currentImg,
            label.x - imgWidth / 2,
            label.y - imgHeight / 2,
            imgWidth,
            imgHeight
          );
        })
      }
    }
  ];

  const chartData = {
    labels: new Array(labelImages.length).fill(''), // 原生标签留空即可
    datasets: [
      {
        label: '示例数据集',
        data: [70, 45, 90, 60, 85],
        fill: true,
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgba(54, 162, 235, 1)',
        pointBackgroundColor: 'rgba(54, 162, 235, 1)'
      }
    ]
  };

  const chartOptions = {
    scales: {
      r: {
        pointLabels: {
          display: false, // 关闭原生文字标签渲染
        },
        beginAtZero: true
      }
    }
  };

  return <Radar data={chartData} options={chartOptions} plugins={customLabelPlugin} />
};

export default RadarChart;

注意事项 #

• 图片预加载逻辑可以放在useEffect中，避免组件多次渲染重复加载图片
• 如果需要同时保留标签文字，可以在drawImage执行完成后调用ctx.fillText()方法在图片对应位置绘制文字
• drawImage的偏移量参数可以根据你的图片实际尺寸调整，确保位置符合预期

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