饼图与环形图

饼图和环形图用于展示各部分占整体的比例关系。通过使用 Chart.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 }
      }
    }
  });
})();

基础环形图示例

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

(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 }
      }
    }
  });
})();

loading