甜甜圈圖和圓餅圖

圓餅圖和甜甜圈圖可能是最常用的圖表。它們被分成多個區塊，每個區塊的弧度顯示每個資料片段的比例值。

它們非常適合顯示資料之間的相對比例。

圓餅圖和甜甜圈圖在 Chart.js 中實際上是相同的類別，但它們有一個不同的預設值 - cutout。這相當於內部應該切除的部分。圓餅圖的預設值為 0，而甜甜圈圖的預設值為 '50%'。

它們也在 Chart 核心中以兩個別名註冊。除了預設值不同和別名不同之外，它們是完全相同的。

const config = { type: 'doughnut', data: data, };

const config = {
  type: 'doughnut',
  data: data,
};

const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

const config = { type: 'pie', data: data, };

const config = {
  type: 'pie',
  data: data,
};

const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

資料集屬性

命名空間

• data.datasets[index] - 僅適用於此資料集的選項
• options.datasets.doughnut - 適用於所有甜甜圈資料集的選項
• options.datasets.pie - 適用於所有圓餅資料集的選項
• options.elements.arc - 適用於所有弧形元素的選項
• options - 適用於整個圖表的選項

甜甜圈/圓餅圖允許為每個資料集指定許多屬性。這些屬性用於設定特定資料集的顯示屬性。例如，資料集弧形的顏色通常以這種方式設定。

名稱	類型	可腳本化	可索引	預設值
backgroundColor	顏色	是	是	'rgba(0, 0, 0, 0.1)'
borderAlign	'center'|'inner'	是	是	'center'
borderColor	顏色	是	是	'#fff'
borderDash	number[]	是	-	[]
borderDashOffset	number	是	-	0.0
borderJoinStyle	'round'|'bevel'|'miter'	是	是	未定義
borderRadius	number|object	是	是	0
borderWidth	number	是	是	2
circumference	number	-	-	未定義
clip	number|object|false	-	-	未定義
data	number[]	-	-	必填
hoverBackgroundColor	顏色	是	是	未定義
hoverBorderColor	顏色	是	是	未定義
hoverBorderDash	number[]	是	-	未定義
hoverBorderDashOffset	number	是	-	未定義
hoverBorderJoinStyle	'round'|'bevel'|'miter'	是	是	未定義
hoverBorderWidth	number	是	是	未定義
hoverOffset	number	是	是	0
offset	number|number[]	是	是	0
rotation	number	-	-	未定義
spacing	number	-	-	0
weight	number	-	-	1

如果這些值為 undefined，則會回退到選項解析中描述的範圍

一般

名稱	描述
circumference	每個資料集覆蓋弧形的掃描範圍的覆寫
clip	如何相對於 chartArea 進行裁剪。正值允許溢位，負值則在 chartArea 內裁剪這麼多像素。0 = 在 chartArea 裁剪。裁剪也可以針對每個邊配置：clip: {left: 5, top: false, right: -2, bottom: 0}
rotation	每個資料集覆寫繪製弧形的起始角度

樣式設定

每個弧形的樣式可以使用以下屬性進行控制

名稱	描述
backgroundColor	弧形背景顏色。
borderColor	弧形邊框顏色。
borderDash	弧形邊框虛線的長度和間距。請參閱MDN (開啟新視窗)。
borderDashOffset	弧形邊框虛線的偏移量。請參閱MDN (開啟新視窗)。
borderJoinStyle	弧形邊框接合樣式。請參閱MDN (開啟新視窗)。
borderWidth	弧形邊框寬度（以像素為單位）。
offset	弧形偏移量（以像素為單位）。
spacing	固定的弧形偏移量（以像素為單位）。類似於 offset，但適用於所有弧形。
weight	資料集的相對厚度。為權重提供一個值將導致圓餅圖或甜甜圈資料集以相對於所有資料集權重值總和的厚度繪製。

如果這些值為 undefined，則會回退到相關的elements.arc.*選項。

邊框對齊

borderAlign 支援以下值。

• 'center' (預設值)
• 'inner'

當設定為 'center' 時，相鄰弧形的邊框將會重疊。當設定為 'inner' 時，保證所有邊框都不會重疊。

邊框半徑

如果此值為數字，則會套用到弧形的所有角落（outerStart、outerEnd、innerStart、innerRight）。如果此值為物件，則 outerStart 屬性會定義外部起始角的邊框半徑。同樣地，也可以指定 outerEnd、innerStart 和 innerEnd 屬性。

互動

每個弧形的互動可以使用以下屬性進行控制

名稱	描述
hoverBackgroundColor	滑鼠懸停時的弧形背景顏色。
hoverBorderColor	滑鼠懸停時的弧形邊框顏色。
hoverBorderDash	滑鼠懸停時的弧形邊框虛線的長度和間距。請參閱MDN (開啟新視窗)。
hoverBorderDashOffset	滑鼠懸停時的弧形邊框虛線偏移量。請參閱MDN (開啟新視窗)。
hoverBorderJoinStyle	滑鼠懸停時的弧形邊框接合樣式。請參閱MDN (開啟新視窗)。
hoverBorderWidth	滑鼠懸停時的弧形邊框寬度（以像素為單位）。
hoverOffset	滑鼠懸停時的弧形偏移量（以像素為單位）。

如果這些值為 undefined，則會回退到相關的elements.arc.*選項。

設定選項

這些是圓餅圖和甜甜圈圖特有的自訂選項。這些選項會在存取時查詢，並與全域圖表設定一起構成圖表的選項。

名稱	類型	預設值	描述
cutout	number|string	50% - 適用於甜甜圈圖，0 - 適用於圓餅圖	圖表中間切除的部分。如果 string 且以 '%' 結尾，則為圖表半徑的百分比。number 被視為像素。
radius	number|string	100%	圖表的外半徑。如果 string 且以 '%' 結尾，則為最大半徑的百分比。number 被視為像素。
rotation	number	0	繪製弧形的起始角度。
circumference	number	360	允許弧形覆蓋的掃描範圍。
animation.animateRotate	boolean	true	如果為 true，則圖表將以旋轉動畫方式呈現。此屬性位於 options.animation 物件中。
animation.animateScale	boolean	false	如果為 true，則會從中心向外縮放動畫呈現圖表。

預設選項

我們也可以針對每個建立的甜甜圈圖類型變更這些預設值，此物件可在 Chart.overrides.doughnut 中找到。圓餅圖也具有這些預設值的副本，可在 Chart.overrides.pie 中變更，唯一的差別是 cutout 設定為 0。

資料結構

對於圓餅圖，資料集需要包含資料點的陣列。資料點應為數字，Chart.js 會將所有數字加總，並計算每個數字的相對比例。

您還需要指定標籤陣列，以便工具提示能正確顯示。

data = {
    datasets: [{
        data: [10, 20, 30]
    }],
    // These labels appear in the legend and in the tooltips when hovering different arcs
    labels: [
        'Red',
        'Yellow',
        'Blue'
    ]
};