ドーナツチャートと円グラフ

円グラフとドーナツチャートはおそらく最も一般的に使用されるチャートです。それらはセグメントに分割されており、各セグメントの円弧はデータの各部分の比例値を示します。

データ間の相対的な比率を示すのに優れています。

円グラフとドーナツチャートは、Chart.jsでは事実上同じクラスですが、`cutout`という1つの異なるデフォルト値を持っています。これは、内側のどの部分を切り抜くかを意味します。円グラフではデフォルトで`0`、ドーナツチャートでは`'50%'`です。

これらは`Chart`コアにも2つのエイリアスで登録されています。異なるデフォルト値とエイリアスを除けば、全く同じです。

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'	はい	はい	undefined
borderRadius	number|object	はい	はい	0
borderWidth	number	はい	はい	2
circumference	number	-	-	undefined
clip	number|object|false	-	-	undefined
data	number[]	-	-	必須
hoverBackgroundColor	色	はい	はい	undefined
hoverBorderColor	色	はい	はい	undefined
hoverBorderDash	number[]	はい	-	undefined
hoverBorderDashOffset	number	はい	-	undefined
hoverBorderJoinStyle	'round'|'bevel'|'miter'	はい	はい	undefined
hoverBorderWidth	number	はい	はい	undefined
hoverOffset	number	はい	はい	0
offset	number|number[]	はい	はい	0
rotation	number	-	-	undefined
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	データセットの相対的な太さ。weightの値を指定すると、円グラフまたはドーナツチャートのデータセットは、すべてのデータセットの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'
    ]
};