Chart.js雷达图标签能否逐个旋转？每标签递增15度需求咨询

我使用Chart.js（结合react-chartjs-2）实现了一个包含24个标签的雷达图，现需设置标签旋转规则：Label 1垂直显示在顶部，后续每个标签较前一个顺时针旋转15度。请问Chart.js是否提供对应的配置选项？

以下是我的实现代码：

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

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

const data = {
  labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7", "Label 8", "Label 9", "Label 10", "Label 11", "Label 12", "Label 13", "Label 14", "Label 15", "Label 16", "Label 17", "Label 18", "Label 19", "Label 20", "Label 21", "Label 22", "Label 23", "Label 24"],
  datasets: [
    {
      label: "Dataset 1",
      data: [65, 59, 90, 81, 56, 5, 59, 90, 81, 56, 65, 59, 0, 81, 56, 65, 59, 90, 81, 56],
      backgroundColor: "rgba(255, 99, 132, 0.2)",
      borderColor: "rgba(255, 99, 132, 1)",
      borderWidth: 1
    }
  ]
};

const options = {
  scales: {
    r: {
      ticks: {
        display: false
      },
      angleLines: {
        display: true,
        color: "#90B7DA",
        borderDash: [11, 10],
        borderDashOffset: 5,
        lineWidth: 1
      },
      angle: 115,
      suggestedMin: 0,
      suggestedMax: 100,
      pointLabels: {
        font: {
          family: "Open Sans",
          size: 10,
          weight: "300"
        },
        color: "#90B7DA"
      }
    }
  },
  plugins: {
    legend: {
      display: false
    }
  }
};

const RadarChart = () => <Radar data={data} options={options} />;

export default RadarChart;

Chart.js 原生的 pointLabels 配置不支持为单个标签单独设置旋转角度，但可以通过自定义插件实现需求。

在图表的 options.plugins 中添加一个自定义插件，监听 afterDraw 钩子，遍历所有标签元素并根据索引计算旋转角度：

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

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

const data = {
  labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7", "Label 8", "Label 9", "Label 10", "Label 11", "Label 12", "Label 13", "Label 14", "Label 15", "Label 16", "Label 17", "Label 18", "Label 19", "Label 20", "Label 21", "Label 22", "Label 23", "Label 24"],
  datasets: [
    {
      label: "Dataset 1",
      data: [65, 59, 90, 81, 56, 5, 59, 90, 81, 56, 65, 59, 0, 81, 56, 65, 59, 90, 81, 56],
      backgroundColor: "rgba(255, 99, 132, 0.2)",
      borderColor: "rgba(255, 99, 132, 1)",
      borderWidth: 1
    }
  ]
};

const options = {
  scales: {
    r: {
      ticks: {
        display: false
      },
      angleLines: {
        display: true,
        color: "#90B7DA",
        borderDash: [11, 10],
        borderDashOffset: 5,
        lineWidth: 1
      },
      angle: 115,
      suggestedMin: 0,
      suggestedMax: 100,
      pointLabels: {
        font: {
          family: "Open Sans",
          size: 10,
          weight: "300"
        },
        color: "#90B7DA"
      }
    }
  },
  plugins: {
    legend: {
      display: false
    },
    // 自定义标签旋转插件
    customLabelRotation: {
      id: 'customLabelRotation',
      afterDraw: (chart) => {
        const scale = chart.scales.r;
        const pointLabels = scale._pointLabelItems;
        
        pointLabels.forEach((label, index) => {
          // 计算旋转角度：Label1（索引0）垂直（0度），后续每个+15度顺时针
          const rotation = index * 15;
          // 获取标签元素
          const element = label.element;
          // 设置旋转变换，以标签中心为原点
          element.transform = `rotate(${rotation}deg) translate(${element.x - element.width/2}, ${element.y - element.height/2})`;
          element.transformOrigin = 'center center';
        });
      }
    }
  }
};

const RadarChart = () => <Radar data={data} options={options} />;

export default RadarChart;

逻辑说明 #

1. 插件通过 afterDraw 钩子在图表绘制完成后执行，确保能获取到已渲染的标签元素
2. 遍历每个标签，根据索引计算旋转角度：第1个标签（索引0）旋转0度，第2个（索引1）旋转15度，以此类推
3. 通过修改标签元素的 transform 和 transformOrigin 属性，实现绕自身中心顺时针旋转的效果

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