# レーダーチャート
レーダーチャートは、複数のデータポイントとその間の差異を示す方法です。
これらは、2つ以上の異なるデータセットのポイントを比較するのに役立ちます。
# データセットのプロパティ
名前空間
data.datasets[index]- このデータセットのみに対するオプションoptions.datasets.line- すべてのラインデータセットのオプションoptions.elements.line- すべてのライン要素のオプションoptions.elements.point- すべてのポイント要素のオプションoptions- チャート全体のオプション
レーダーチャートでは、各データセットに多くのプロパティを指定できます。これらは、特定のデータセットの表示プロパティを設定するために使用されます。たとえば、ラインの色は一般的にこの方法で設定されます。
| 名前 | タイプ | スクリプト可能 | インデックス可能 | デフォルト |
|---|---|---|---|---|
backgroundColor | 色 | はい | - | 'rgba(0, 0, 0, 0.1)' |
borderCapStyle | 文字列 | はい | - | 'butt' |
borderColor | 色 | はい | - | 'rgba(0, 0, 0, 0.1)' |
borderDash | 数値配列 | はい | - | [] |
borderDashOffset | 数値 | はい | - | 0.0 |
borderJoinStyle | 'round'|'bevel'|'miter' | はい | - | 'miter' |
borderWidth | 数値 | はい | - | 3 |
hoverBackgroundColor | 色 | はい | - | 未定義 |
hoverBorderCapStyle | 文字列 | はい | - | 未定義 |
hoverBorderColor | 色 | はい | - | 未定義 |
hoverBorderDash | 数値配列 | はい | - | 未定義 |
hoverBorderDashOffset | 数値 | はい | - | 未定義 |
hoverBorderJoinStyle | 'round'|'bevel'|'miter' | はい | - | 未定義 |
hoverBorderWidth | 数値 | はい | - | 未定義 |
clip | 数値|オブジェクト|false | - | - | 未定義 |
data | 数値配列 | - | - | 必須 |
fill | 真偽値|文字列 | はい | - | false |
label | 文字列 | - | - | '' |
order | 数値 | - | - | 0 |
tension | 数値 | - | - | 0 |
pointBackgroundColor | 色 | はい | はい | 'rgba(0, 0, 0, 0.1)' |
pointBorderColor | 色 | はい | はい | 'rgba(0, 0, 0, 0.1)' |
pointBorderWidth | 数値 | はい | はい | 1 |
pointHitRadius | 数値 | はい | はい | 1 |
pointHoverBackgroundColor | 色 | はい | はい | 未定義 |
pointHoverBorderColor | 色 | はい | はい | 未定義 |
pointHoverBorderWidth | 数値 | はい | はい | 1 |
pointHoverRadius | 数値 | はい | はい | 4 |
pointRadius | 数値 | はい | はい | 3 |
pointRotation | 数値 | はい | はい | 0 |
pointStyle | pointStyle | はい | はい | 'circle' |
spanGaps | 真偽値 | - | - | 未定義 |
これらの値が未定義の場合、オプション解決で説明されているスコープにフォールバックします。
# 一般
| 名前 | 説明 |
|---|---|
clip | chartAreaを基準にしてクリップする方法。正の値はオーバーフローを許可し、負の値はchartArea内でそのピクセル数をクリップします。 0 = chartAreaでクリップ。クリッピングは、辺ごとに設定することもできます： clip: {left: 5, top: false, right: -2, bottom: 0} |
label | 凡例とツールチップに表示されるデータセットのラベル。 |
order | データセットの描画順序。ツールチップと凡例の順序にも影響します。 詳細 |
# ポイントのスタイリング
各ポイントのスタイルは、次のプロパティで制御できます。
| 名前 | 説明 |
|---|---|
pointBackgroundColor | ポイントの塗りつぶしの色。 |
pointBorderColor | ポイントの境界線の色。 |
pointBorderWidth | ポイントの境界線の幅（ピクセル単位）。 |
pointHitRadius | マウスイベントに反応する、表示されていないポイントのピクセルサイズ。 |
pointRadius | ポイントの形状の半径。0に設定すると、ポイントはレンダリングされません。 |
pointRotation | ポイントの回転角度（度単位）。 |
pointStyle | ポイントのスタイル。 詳細... |
これらの値が未定義の場合、最初にデータセットオプションに、次に関連付けられているelements.point.*オプションにフォールバックします。
# ラインのスタイリング
ラインのスタイルは、次のプロパティで制御できます。
| 名前 | 説明 |
|---|---|
backgroundColor | ラインの塗りつぶしの色。 |
borderCapStyle | ラインのキャップスタイル。 MDN (新しいウィンドウで開きます)を参照してください。 |
borderColor | ラインの色。 |
borderDash | 破線の長さ間隔。MDN (新しいウィンドウで開きます)を参照してください。 |
borderDashOffset | ラインの破線のオフセット。 MDN (新しいウィンドウで開きます)を参照してください。 |
borderJoinStyle | ラインの接合スタイル。 MDN (新しいウィンドウで開きます)を参照してください。 |
borderWidth | ラインの幅（ピクセル単位）。 |
fill | ラインの下の領域の塗りつぶし方法。 エリアチャートを参照してください。 |
tension | ラインのベジェ曲線の張力。直線を引くには0に設定します。 |
spanGaps | trueの場合、データがないポイントまたはnullデータのポイント間に線が引かれます。falseの場合、nullデータのポイントはラインに切れ目を作成します。 |
値が未定義の場合、値は関連付けられているelements.line.*オプションにフォールバックします。
# 相互作用
各ポイントとの相互作用は、次のプロパティで制御できます。
| 名前 | 説明 |
|---|---|
pointHoverBackgroundColor | ポイントがホバーされたときの背景色。 |
pointHoverBorderColor | ポイントがホバーされたときの境界線の色。 |
pointHoverBorderWidth | ポイントがホバーされたときの境界線の幅。 |
pointHoverRadius | ポイントがホバーされたときの半径。 |
# スケールオプション
レーダーチャートは単一のスケールのみをサポートします。このスケールのオプションは、線形放射状軸のページから参照できるscales.rプロパティで定義されています。
options = {
scales: {
r: {
angleLines: {
display: false
},
suggestedMin: 50,
suggestedMax: 100
}
}
};
# デフォルトオプション
作成されたすべてのレーダーチャートに設定を適用したい場合があります。グローバルレーダーチャート設定は、Chart.overrides.radarに保存されます。グローバルオプションを変更すると、変更後に作成されたチャートのみに影響します。既存のチャートは変更されません。
# データ構造
レーダーチャートのデータセットのdataプロパティは、数値の配列として指定されます。データ配列の各ポイントは、同じインデックスのラベルに対応します。
data: [20, 10]
レーダーチャートでは、各ポイントの意味のコンテキストを提供するために、チャートの各ポイントの周囲に表示される文字列の配列を含めます。
data: {
labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
datasets: [{
data: [20, 10, 4, 2]
}]
}
# 内部データ形式
{x, y}
← 極座標エリアチャート 散布図 →