如何在Chart.js雷达图的标签中为数值设置两种不同颜色？

Chart.js 默认不支持在轴标签中解析 HTML 标签，所以直接用 <span> 样式不会生效。要实现不同数值的颜色区分，你需要通过自定义绘制逻辑手动渲染带颜色的标签文本，具体步骤如下：

1. 重构标签数据 #

把原来的字符串标签拆成结构化数据，方便后续提取名称、两个数值：

const labelData = [
  { name: 'Eating', val1: 65, val2: 28 },
  { name: 'Drinking', val1: 59, val2: 48 },
  { name: 'Sleeping', val1: 90, val2: 40 },
  { name: 'Designing', val1: 81, val2: 19 },
  { name: 'Coding', val1: 56, val2: 96 },
  { name: 'Cycling', val1: 55, val2: 27 },
  { name: 'Running', val1: 48, val2: 100 }
];

// 给图表数据提供纯名称的标签（用于轴的布局计算）
const data = {
  labels: labelData.map(item => item.name),
  datasets: [{
    label: 'My First Dataset',
    data: labelData.map(item => item.val1),
    fill: true,
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgb(255, 99, 132)',
    pointBackgroundColor: 'rgb(255, 99, 132)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(255, 99, 132)'
  }, {
    label: 'My Second Dataset',
    data: labelData.map(item => item.val2),
    fill: true,
    backgroundColor: 'rgba(54, 162, 235, 0.2)',
    borderColor: 'rgb(54, 162, 235)',
    pointBackgroundColor: 'rgb(54, 162, 235)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(54, 162, 235)'
  }]
};

2. 配置自定义绘制逻辑 #

在图表配置中，隐藏默认的轴标签，然后通过 plugins.afterDraw 钩子手动绘制带颜色的文本：

const config = {
  type: 'radar',
  data: data,
  options: {
    elements: {
      line: {
        borderWidth: 3
      }
    },
    scales: {
      r: {
        // 隐藏默认轴标签，避免和自定义文本重叠
        ticks: {
          display: false
        },
        // 调整轴标签位置范围，给自定义文本留出空间
        pointLabels: {
          padding: 20
        }
      }
    },
    plugins: {
      afterDraw: (chart) => {
        const ctx = chart.ctx;
        const scale = chart.scales.r;
        const labelOffset = 15; // 文本距离轴点的偏移量

        labelData.forEach((item, index) => {
          // 获取当前标签在雷达图上的坐标位置
          const pos = scale.getPointPosition(index, scale.max + labelOffset);
          const { name, val1, val2 } = item;

          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';

          // 绘制名称（默认颜色）
          ctx.fillStyle = '#333';
          ctx.font = '12px Arial';
          ctx.fillText(name, pos.x, pos.y - 15);

          // 绘制第一个数值（红色）
          ctx.fillStyle = 'rgb(255, 99, 132)';
          ctx.font = 'bold 12px Arial';
          ctx.fillText(val1, pos.x - 20, pos.y + 15);

          // 绘制分隔符
          ctx.fillStyle = '#333';
          ctx.fillText('/', pos.x, pos.y + 15);

          // 绘制第二个数值（蓝色）
          ctx.fillStyle = 'rgb(54, 162, 235)';
          ctx.fillText(val2, pos.x + 20, pos.y + 15);
        });
      }
    }
  }
};

关键说明 #

• 用 scale.getPointPosition 获取每个标签的精确坐标，确保文本对齐雷达轴端点
• 通过多次调用 fillText 分别绘制不同颜色的文本块，实现颜色区分
• 调整 padding 和 labelOffset 参数可以优化文本位置，避免和图表元素重叠

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