菜鸟教程
教程 chartjs tutorial

饼图与环形图

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

基础饼图示例

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

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 },
      },
    },
  });
})();
在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<title>Chart.js 饼图与环形图示例</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
<style>
body {
max-width: 700px;
margin: 2rem auto;
font-family: Arial, sans-serif;
background: #fafafa;
padding: 1rem;
display: flex;
gap: 2rem;
flex-wrap: wrap;
justify-content: center;
}


canvas {
  background: #fff;
  border: 1px solid #ccc;
  display: block;
}



</style>
</head>


<body>
<canvas id="pieChart" width="350" height="350"></canvas>
<canvas id="doughnutChart" width="350" height="350"></canvas>


<script>
(function () {
const pieCtx = document.getElementById(‘pieChart’).getContext(‘2d’);
new Chart(pieCtx, {
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 }
}
}
});


  const doughnutCtx = document.getElementById('doughnutChart').getContext('2d');
  new Chart(doughnutCtx, {
    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 }
      }
    }
  });
})();



</script>
</body>


</html>

相关内容