# 雷达图

URL: https://caijiao.org/chartjs/03-chart-types/04-radar
Source: docs/chartjs/03-chart-types/04-radar.md
Description: 介绍如何使用 Chart.js 创建雷达图，展示多变量数据的对比，适合用于性能分析和能力评估等场景。

雷达图用于显示多变量数据的表现情况，通过多个轴向呈现各项指标。使用 [Chart.js](/chartjs/) 可以轻松配置数据和样式，实现直观的多维数据展示。

```js
(function () {
  const ctx = document.getElementById("radarChart").getContext("2d");
  const radarChart = new Chart(ctx, {
    type: "radar",
    data: {
      labels: ["攻击", "防御", "法术", "耐力", "速度", "智力"],
      datasets: [
        {
          label: "角色A",
          data: [65, 59, 90, 81, 56, 55],
          fill: true,
          backgroundColor: "rgba(255, 99, 132, 0.3)",
          borderColor: "rgb(255, 99, 132)",
          pointBackgroundColor: "rgb(255, 99, 132)",
        },
        {
          label: "角色B",
          data: [28, 48, 40, 19, 96, 27],
          fill: true,
          backgroundColor: "rgba(54, 162, 235, 0.3)",
          borderColor: "rgb(54, 162, 235)",
          pointBackgroundColor: "rgb(54, 162, 235)",
        },
      ],
    },
    options: {
      responsive: true,
      scales: {
        r: {
          angleLines: { display: true },
          suggestedMin: 0,
          suggestedMax: 100,
        },
      },
      plugins: {
        legend: { display: true },
        tooltip: { enabled: true },
      },
    },
  });
})();
```

[在线代码演示](/chartjs/demos/8.html)