# 饼图与环形图

URL: https://caijiao.org/chartjs/03-chart-types/03-pie-doughnut
Source: docs/chartjs/03-chart-types/03-pie-doughnut.md
Description: 介绍如何使用 Chart.js 创建饼图与环形图，讲解数据配置、颜色设置及图表切片展示，方便制作直观的比例分析图表。

饼图和环形图用于展示各部分占整体的比例关系。通过使用 [Chart.js](/chartjs/)，可以轻松定制扇形颜色和图表样式，实现清晰的视觉效果。

## 基础饼图示例

下面示例展示了如何创建一个饼图，突出各部分比例。

```js
(function () {
  const ctx = document.getElementById("pieChart").getContext("2d");
  const pieChart = new Chart(ctx, {
    type: "pie",
    data: {
      labels: ["红", "蓝", "黄", "绿", "紫"],
      datasets: [
        {
          label: "样本数据",
          data: [12, 19, 3, 5, 2],
          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)",
          ],
        },
      ],
    },
    options: {
      responsive: true,
      plugins: {
        legend: { display: true },
        tooltip: { enabled: true },
      },
    },
  });
})();
```

## 基础环形图示例

环形图是饼图的变体，中心空心，视觉更轻盈。

```js
(function () {
  const ctx = document.getElementById("doughnutChart").getContext("2d");
  const doughnutChart = new Chart(ctx, {
    type: "doughnut",
    data: {
      labels: ["红", "蓝", "黄", "绿", "紫"],
      datasets: [
        {
          label: "样本数据",
          data: [12, 19, 3, 5, 2],
          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)",
          ],
        },
      ],
    },
    options: {
      responsive: true,
      plugins: {
        legend: { display: true },
        tooltip: { enabled: true },
      },
    },
  });
})();
```

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