環形圖又叫做甜甜圈圖，其本質是餅圖将中間區域挖空。
環形圖是由兩個及兩個以上大小不一的餅圖疊在一起，挖去中間的部分所構成的圖形。
- 餅圖是用圓形及圓内扇形的角度來表示數值大小的圖形，它主要用于表示一個樣本（或總體）中各組成部分的資料占全部資料的比例，對于研究結構性問題十分有用。
- 環形圖與餅圖類似，但又有差別。環形圖中間有一個"空洞"，每個樣本用一個環來表示，樣本中的每一部分資料用環中的一段表示。是以環形圖可顯示多個樣本各部分所占的相應比例，進而有利于構成的比較研究。
環形圖 type 屬性為 doughnut ，type 描述了圖表類型。
const config = {
type: 'doughnut',
data: data,
};
接下來我們建立一個簡單的環形圖：
執行個體
const ctx = document.getElementById('myChart');
const data = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: '環形圖執行個體',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
};
const config = {
type: 'doughnut',
data: data,
options: {
responsive: true, // 設定圖表為響應式，根據螢幕視窗變化而變化
maintainAspectRatio: false,// 保持圖表原有比例
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
};
const myChart = new Chart(ctx, config);
以上執行個體輸出結果為：