如何在Chart.js中为多行标签的每行设置不同颜色与字号？

Chart.js 默认的 pointLabels 不支持为多行标签分别设置颜色、字号，你之前尝试的HTML插入、嵌套color数组的方法都不符合Chart.js的配置规则，下面是可行的自定义绘制方案：

核心思路 #

通过Chart.js的插件机制，利用afterDraw钩子手动绘制标签，直接调用Canvas API为每行文本设置独立样式，同时隐藏默认的pointLabels避免重复。

完整代码示例 #

const ctx = document.getElementById('radarChart').getContext('2d');
const radarChart = new Chart(ctx, {
  type: 'radar',
  data: {
    // 把每组两行标签存为数组，方便分别读取
    labels: [['A', '40'], ['B', '35'], ['C', '50'], ['D', '45'], ['E', '30']],
    datasets: [{
      label: '指标数据',
      data: [40, 35, 50, 45, 30],
      backgroundColor: 'rgba(54, 162, 235, 0.2)',
      borderColor: 'rgba(54, 162, 235, 1)',
      pointBackgroundColor: 'rgba(54, 162, 235, 1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(54, 162, 235, 1)'
    }]
  },
  options: {
    scales: {
      r: {
        // 隐藏默认标签，我们手动绘制
        pointLabels: {
          display: false
        },
        // 可根据需求调整雷达图半径，避免标签重叠
        min: 0,
        max: 60
      }
    }
  },
  plugins: [{
    afterDraw: function(chart) {
      const ctx = chart.ctx;
      const scale = chart.scales.r;
      const labels = chart.data.labels;

      labels.forEach((labelGroup, index) => {
        // 获取当前标签的角度与坐标
        const angle = scale.getIndexAngle(index);
        // 调整乘数（比如1.1）可以控制标签与雷达图的距离
        const x = scale.xCenter + scale.maxRadius * 1.1 * Math.cos(angle);
        const y = scale.yCenter + scale.maxRadius * 1.1 * Math.sin(angle);

        // 绘制第一行标签（如'A'）
        ctx.save();
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.font = 'bold 16px sans-serif';
        ctx.fillStyle = '#2d3436';
        ctx.fillText(labelGroup[0], x, y);

        // 绘制第二行标签（如'40'）
        ctx.font = '12px sans-serif';
        ctx.fillStyle = '#636e72';
        ctx.textBaseline = 'top';
        ctx.fillText(labelGroup[1], x, y);
        ctx.restore();
      });
    }
  }]
});

关键细节说明 #

1. 标签数据结构：将每组两行标签存为数组，方便在绘制时分别调用
2. 坐标计算：通过scale.getIndexAngle()获取标签对应的角度，结合雷达图中心坐标、最大半径计算出文本绘制位置
3. 样式控制：利用Canvas的font、fillStyle、textBaseline属性分别控制两行文本的字号、颜色、对齐方式
4. 距离调整：修改scale.maxRadius的乘数（如示例中的1.1），可以控制标签与雷达图的距离，避免重叠

为什么之前的方法无效 #

• HTML代码插入：Chart.js的pointLabels仅支持纯文本渲染，会将HTML标签当作普通字符显示
• 嵌套color数组：pointLabels.color仅支持单一颜色值或返回单一颜色的回调函数，不支持数组对应多行样式

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