# 極座標領域チャート

極座標領域チャートは円グラフに似ていますが、各セグメントの角度は同じで、値に応じてセグメントの半径が異なります。

このタイプのチャートは、円グラフと同様にデータの比較を示したい場合に便利ですが、コンテキストのために値のスケールも示します。

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

# データセットのプロパティ

名前空間

data.datasets[index] - このデータセット専用のオプション
options.datasets.polarArea - すべての極座標領域データセットのオプション
options.elements.arc - すべての円弧要素のオプション
options - チャート全体のオプション

極座標領域チャートのデータセットには、特定のデータセットのオプションを設定するために、次のオプションを含めることができます。

名前	タイプ	スクリプト可能	インデックス可能	デフォルト
`backgroundColor`	`色`	はい	はい	`'rgba(0, 0, 0, 0.1)'`
`borderAlign`	`'center'`\|`'inner'`	はい	はい	`'center'`
`borderColor`	`色`	はい	はい	`'#fff'`
`borderDash`	`数値配列`	はい	-	`[]`
`borderDashOffset`	`数値`	はい	-	`0.0`
`borderJoinStyle`	`'round'`\|`'bevel'`\|`'miter'`	はい	はい	`未定義`
`borderWidth`	`数値`	はい	はい	`2`
`clip`	`数値`\|`オブジェクト`\|`false`	-	-	`未定義`
`data`	`数値配列`	-	-	必須
`hoverBackgroundColor`	`色`	はい	はい	`未定義`
`hoverBorderColor`	`色`	はい	はい	`未定義`
`hoverBorderDash`	`数値配列`	はい	-	`未定義`
`hoverBorderDashOffset`	`数値`	はい	-	`未定義`
`hoverBorderJoinStyle`	`'round'`\|`'bevel'`\|`'miter'`	はい	はい	`未定義`
`hoverBorderWidth`	`数値`	はい	はい	`未定義`
`circular`	`真偽値`	はい	はい	`true`

これらの値がすべて未定義の場合、オプションの解決で説明されているスコープにフォールバックします。

# 全般

名前	説明
`clip`	chartArea を基準にしたクリップ方法。正の値はオーバーフローを許可し、負の値は chartArea 内のピクセル数をクリップします。 `0` = chartArea でクリップ。クリッピングは、辺ごとに設定することもできます。 `clip: {left: 5, top: false, right: -2, bottom: 0}`

# スタイル

各円弧のスタイルは、次のプロパティで制御できます。

名前	説明
`backgroundColor`	円弧の背景色。
`borderColor`	円弧の境界線の色。
`borderDash`	円弧の境界線の長さ.破線のスペース。 MDN (新しいウィンドウで開きます) を参照してください。
`borderDashOffset`	破線の円弧境界線のオフセット。 MDN (新しいウィンドウで開きます) を参照してください。
`borderJoinStyle`	円弧境界線の結合スタイル。 MDN (新しいウィンドウで開きます) を参照してください。
`borderWidth`	円弧の境界線の幅 (ピクセル単位)。
`circular`	デフォルトでは、円弧は曲線です。 `circular: false` の場合、円弧はフラットになります。

これらの値がすべて未定義の場合、関連付けられている elements.arc.* オプションにフォールバックします。

# 境界線の配置

borderAlign では、次の値がサポートされています。

'center' (デフォルト)
'inner'

'center' が設定されている場合、隣接する円弧の境界線は重なります。 'inner' が設定されている場合、すべての境界線が重ならないことが保証されます。

# 相互作用

各円弧との相互作用は、次のプロパティで制御できます。

名前	説明
`hoverBackgroundColor`	ホバー時の円弧の背景色。
`hoverBorderColor`	ホバー時の円弧の境界線の色。
`hoverBorderDash`	ホバー時の円弧の境界線の長さ.破線のスペース。 MDN (新しいウィンドウで開きます) を参照してください。
`hoverBorderDashOffset`	ホバー時の破線の円弧境界線のオフセット。 MDN (新しいウィンドウで開きます) を参照してください。
`hoverBorderJoinStyle`	ホバー時の円弧境界線の結合スタイル。 MDN (新しいウィンドウで開きます) を参照してください。
`hoverBorderWidth`	ホバー時の円弧の境界線の幅 (ピクセル単位)。

これらの値がすべて未定義の場合、関連付けられている elements.arc.* オプションにフォールバックします。

# 設定オプション

これらは、極座標領域チャートに固有のカスタマイズオプションです。これらのオプションはアクセス時に検索され、グローバルチャートのデフォルトオプションと合わせてチャートのオプションを形成します。

名前	タイプ	デフォルト	説明
`animation.animateRotate`	`真偽値`	`true`	true の場合、チャートは回転アニメーションでアニメーション化されます。このプロパティは、`options.animation` オブジェクトにあります。
`animation.animateScale`	`真偽値`	`true`	true の場合、チャートを中央から外側に向かってスケーリングするアニメーションを実行します。

極座標領域チャートは、radialLinear スケールを使用します。追加の設定は、スケールを介して提供されます。

# デフォルトオプション

作成される各 PolarArea タイプのデフォルト値を変更することもできます。このオブジェクトは、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'
    ]
};

← 複合チャートレーダーチャート →