Chart.js - 餅狀圖

Chart.js 餅狀圖是另一類用於表示資料集的最常用的圖表。與甜甜圈圖類似，餅狀圖也劃分為多個扇區，各個扇區的弧線比例顯示每個資料片段的比例值。如果您要顯示資料之間的關係比例，那麼餅狀圖也是一個不錯的選擇。

甜甜圈圖與餅狀圖的區別在於它們對開孔進行取值，該值等同於內部應該切出的部分。對於餅狀圖，開孔的預設值為 0，而對於甜甜圈圖，其值為 50%。

以下是餅狀圖中用於設定資料集屬性的名稱空間 −

data.datasets[index] − 它僅提供此資料集的選項。
options.datasets.pie − 它提供所有餅資料集的選項。
options.elements.arc − 它提供所有弧形元素的選項。
Options − 它提供整個圖表的選項

我們需要使用 type: "pie" 來建立餅狀圖。

示例

我們來看一個示例，透過該示例將建立一個餅狀圖 −

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'pie',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "online tutorial subjects",
               data: [20, 40, 13, 35, 20, 38],
               backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'],
               hoverOffset: 5
            }],
         },
         options: {
            responsive: false,
         },
      });
   </script>
</body>
</html>

輸出

它將生成以下餅狀圖作為輸出 −

列印頁面