如何为Chart.js雷达图的各个坐标轴设置独立颜色？

Chart.js原生雷达图的径向角度轴默认只支持全局统一样式配置，没有提供单条轴独立改色的内置配置项，通过自定义插件拦截绘制逻辑就能实现需求，不需要修改框架源码。

• 第一步：先按顺序给每个坐标轴定义独立样式，配置顺序和labels数组的维度顺序一一对应

// 示例数据
const chartData = {
  labels: ['输出', '生存', '机动', '控制', '爆发'],
  datasets: [{
    label: '英雄属性',
    data: [82, 65, 70, 48, 90],
    fill: true,
    backgroundColor: 'rgba(14, 102, 221, 0.2)',
    borderColor: 'rgb(14, 102, 221)'
  }]
};
// 每个轴的独立颜色配置，顺序和labels严格对应
const axisStyleMap = [
  '#e74c3c', // 输出轴-红色
  '#2ecc71', // 生存轴-绿色
  '#3498db', // 机动轴-蓝色
  '#f39c12', // 控制轴-橙色
  '#9b59b6'  // 爆发轴-紫色
];

• 第二步：编写自定义绘制插件，替换默认的统一颜色轴线绘制逻辑

const radarAxisCustomPlugin = {
  id: 'radarAxisCustomStyle',
  beforeDraw: (chart) => {
    const radialScale = chart.scales.r;
    const ctx = chart.ctx;
    ctx.save();
    // 遍历所有角度轴，逐个按自定义样式绘制
    chart.data.labels.forEach((_, index) => {
      const axisAngle = radialScale.getIndexAngle(index) - Math.PI / 2;
      const centerX = radialScale.xCenter;
      const centerY = radialScale.yCenter;
      const axisLength = radialScale.drawingArea;
      const endX = centerX + Math.cos(axisAngle) * axisLength;
      const endY = centerY + Math.sin(axisAngle) * axisLength;

      ctx.beginPath();
      ctx.strokeStyle = axisStyleMap[index];
      ctx.lineWidth = 2; // 也可以给每个轴单独配粗细，和颜色配置逻辑一致
      ctx.moveTo(centerX, centerY);
      ctx.lineTo(endX, endY);
      ctx.stroke();
    });
    ctx.restore();
  }
};

• 第三步：初始化图表时注册插件，关闭默认的角度线绘制避免重叠

new Chart(document.getElementById('radarCanvas'), {
  type: 'radar',
  data: chartData,
  options: {
    scales: {
      r: {
        angleLines: {
          display: false // 关闭默认的全局统一样式角度线
        },
        // 其余原有配置（网格线、刻度、顶点标签等）正常保留即可
        pointLabels: {
          font: { size: 14 }
        }
      }
    },
    plugins: {
      radarAxisCustomStyle: true
    }
  },
  plugins: [radarAxisCustomPlugin]
});

扩展提示：如果需要给单个轴配置虚线、透明度、顶点标签颜色、刻度样式，都可以在插件的遍历循环中增加对应配置项，实现逻辑和单独配置轴线颜色完全一致。

最终实现效果参考：

内容的提问来源于stack exchange，提问作者Adam Polak Moetsi