極區圖表

極區圖表類似於圓餅圖，但每個區段的圓心角都相同 - 區段的半徑會根據其值而有所不同。

當我們想要顯示類似於圓餅圖的比較數據，但也顯示一個值的範圍作為參考時，這種類型的圖表通常很有用。

const config = { type: 'polarArea', data: data, options: {} };

const config = {
  type: 'polarArea',
  data: data,
  options: {}
};

const data = { labels: [ '紅色', '綠色', '黃色', '灰色', '藍色' ], datasets: [{ label: '我的第一個資料集', data: [11, 16, 7, 3, 14], backgroundColor: [ 'rgb(255, 99, 132)',

const data = {
  labels: [
    'Red',
    'Green',
    'Yellow',
    'Grey',
    'Blue'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [11, 16, 7, 3, 14],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(75, 192, 192)',
      'rgb(255, 205, 86)',
      'rgb(201, 203, 207)',
      'rgb(54, 162, 235)'
    ]
  }]
};

資料集屬性

命名空間

• data.datasets[index] - 僅針對此資料集選項
• options.datasets.polarArea - 針對所有極區圖資料集選項
• 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'	是	是	未定義
borderWidth	number	是	是	2
clip	number|object|false	-	-	未定義
data	number[]	-	-	必要
hoverBackgroundColor	顏色	是	是	未定義
hoverBorderColor	顏色	是	是	未定義
hoverBorderDash	number[]	是	-	未定義
hoverBorderDashOffset	number	是	-	未定義
hoverBorderJoinStyle	'round'|'bevel'|'miter'	是	是	未定義
hoverBorderWidth	number	是	是	未定義
circular	布林值	是	是	true

這些值如果為「未定義」，會採用選項解析度中所述之範圍

一般

名稱	描述
clip	如何相對於圖表區域進行裁剪。正值允許溢位，負值會在圖表區域內裁剪掉相同像素。0 = 在圖表區域裁剪。也可針對每一邊配置裁剪：clip: {left: 5, top: false, right: -2, bottom: 0}

樣式

可使用下列屬性控制每個弧形的樣式

名稱	描述
backgroundColor	弧形背景顏色。
borderColor	弧形邊框顏色。
borderDash	弧形邊框長度和虛線間距。請參閱MDN (opens new window)。
borderDashOffset	弧形邊框的虛線偏移量。請參閱MDN (opens new window)。
borderJoinStyle	弧形邊框連接樣式。參閱 MDN (開啟新視窗)。
borderWidth	弧形邊框寬度（畫素）。
circular	預設地，弧形會是彎曲的。如果 circular: false 弧形會是平的。

如果這些值皆為 undefined，將回退到關聯的 elements.arc.* 選項。

邊界對齊

borderAlign 支援以下值。

• 'center'（預設）
• 'inner'

設定成 'center' 時，相鄰的弧形邊界會相互重疊。設定成 'inner' 時，可以確保所有邊界都不會重疊。

互動

可以透過下列屬性控制與每一個弧形的互動

名稱	描述
hoverBackgroundColor	滑鼠懸停時弧形的背景顏色。
hoverBorderColor	滑鼠懸停時弧形的邊框顏色。
hoverBorderDash	滑鼠懸停時弧形邊框的長度和破折號的間距。參閱 MDN (開啟新視窗)。
hoverBorderDashOffset	滑鼠懸停時弧形邊框線條破折號的偏移量。參閱 MDN (開啟新視窗)。
hoverBorderJoinStyle	滑鼠懸停時弧形邊框的連接樣式。參閱 MDN (開啟新視窗)。
hoverBorderWidth	滑鼠懸停時弧形邊框的寬度（畫素）。

如果這些值皆為 undefined，將回退到關聯的 elements.arc.* 選項。

設定選項

這些是對於極地區圖形特定的自訂選項。這些選項在存取時會進行查詢，並與 全域圖形預設選項 一同形成圖形的選項。

名稱	類型	預設值	描述
animation.animateRotate	布林值	true	如果為 true，圖形會以旋轉動畫方式進入畫面。此屬性位於 options.animation 物件中。
animation.animateScale	布林值	true	如果為 true，會對圖形從中心向外縮放進行動畫。

極地區圖形使用 radialLinear 縮放。額外的設定透過縮放提供。

預設選項

我們也可以變更為每個所建立的極地區圖形類型這些預設值，此物件可在 Chart.overrides.polarArea 取得。變更全域選項僅影響在變更後建立的圖形。現有的圖形不會被變更。

例如，若要設定所有新的極地區圖形 animateScale = false，您需要執行下列動作

Chart.overrides.polarArea.animation.animateScale = false;

資料結構

對於極地區圖形，資料集需要包含一個資料點陣列。資料點應為數字，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'
    ]
};