# 极地区域图

URL: https://caijiao.org/chartjs/03-chart-types/05-polar-area
Source: docs/chartjs/03-chart-types/05-polar-area.md
Description: 介绍如何使用 Chart.js 创建极地区域图，展示数据在极坐标系中的分布和变化，适合表现周期性和方向性数据。

极地区域图是基于极坐标系绘制的图表，能展示数据在角度和半径上的变化趋势。借助 [Chart.js](/chartjs/) 可以方便地绘制和自定义极地区域图，实现多样化的视觉效果。

```js
(function () {
  const ctx = document.getElementById("polarAreaChart").getContext("2d");
  const polarAreaChart = new Chart(ctx, {
    type: "polarArea",
    data: {
      labels: ["红", "蓝", "黄", "绿", "紫", "橙"],
      datasets: [
        {
          label: "样本数据",
          data: [11, 16, 7, 3, 14, 9],
          backgroundColor: [
            "rgba(255, 99, 132, 0.7)",
            "rgba(54, 162, 235, 0.7)",
            "rgba(255, 206, 86, 0.7)",
            "rgba(75, 192, 192, 0.7)",
            "rgba(153, 102, 255, 0.7)",
            "rgba(255, 159, 64, 0.7)",
          ],
        },
      ],
    },
    options: {
      responsive: true,
      plugins: {
        legend: { display: true },
        tooltip: { enabled: true },
      },
      scales: {
        r: {
          ticks: {
            beginAtZero: true,
          },
        },
      },
    },
  });
})();
```

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