レーダー
レーダー チャートは、複数のデータ ポイントとそれらの間の変化を表示する方法です。
多くの場合、2 つ以上の異なるデータ セットのポイントを比較するのに役立ちます。
使用例
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: data,
options: options
});
データセットのプロパティ
レーダー チャートでは、データセットごとに多くのプロパティを指定できます。これらは、特定のデータセットの表示プロパティを設定するために使用されます。たとえば、線の色は一般的にこのように設定されます。
名前 | タイプ | スクリプト可能 | インデックス可能 | デフォルト |
---|---|---|---|---|
backgroundColor |
Color |
はい | - | 'rgba(0, 0, 0, 0.1)' |
borderCapStyle |
string |
はい | - | 'butt' |
borderColor |
Color |
はい | - | 'rgba(0, 0, 0, 0.1)' |
borderDash |
number[] |
はい | - | [] |
borderDashOffset |
number |
はい | - | 0.0 |
borderJoinStyle |
string |
はい | - | 'miter' |
borderWidth |
number |
はい | - | 3 |
hoverBackgroundColor |
Color |
はい | - | undefined |
hoverBorderCapStyle |
string |
はい | - | undefined |
hoverBorderColor |
Color |
はい | - | undefined |
hoverBorderDash |
number[] |
はい | - | undefined |
hoverBorderDashOffset |
number |
はい | - | undefined |
hoverBorderJoinStyle |
string |
はい | - | undefined |
hoverBorderWidth |
number |
はい | - | undefined |
fill |
boolean|string |
はい | - | true |
label |
string |
- | - | '' |
order |
number |
- | - | 0 |
lineTension |
number |
- | - | 0 |
pointBackgroundColor |
Color |
はい | はい | 'rgba(0, 0, 0, 0.1)' |
pointBorderColor |
Color |
はい | はい | 'rgba(0, 0, 0, 0.1)' |
pointBorderWidth |
number |
はい | はい | 1 |
pointHitRadius |
number |
はい | はい | 1 |
pointHoverBackgroundColor |
Color |
はい | はい | undefined |
pointHoverBorderColor |
Color |
はい | はい | undefined |
pointHoverBorderWidth |
number |
はい | はい | 1 |
pointHoverRadius |
number |
はい | はい | 4 |
pointRadius |
number |
はい | はい | 3 |
pointRotation |
number |
はい | はい | 0 |
pointStyle |
string|Image |
はい | はい | 'circle' |
spanGaps |
boolean |
- | - | undefined |
全般的
名前 | 説明 |
---|---|
label |
凡例とツールヒントに表示されるデータセットのラベル。 |
order |
データセットの描画順序。 |
ポイントスタイリング
各ポイントのスタイルは、次のプロパティで制御できます。
名前 | 説明 |
---|---|
pointBackgroundColor |
ポイントの塗りつぶしの色。 |
pointBorderColor |
ポイントの境界線の色。 |
pointBorderWidth |
ポイントの境界線の幅 (ピクセル単位)。 |
pointHitRadius |
マウス イベントに反応する非表示ポイントのピクセル サイズ。 |
pointRadius |
ポイントシェイプの半径。 0 に設定すると、ポイントはレンダリングされません。 |
pointRotation |
点の回転 (度単位)。 |
pointStyle |
ポイントのスタイル。もっと... |
これらすべての値がundefined
、最初にデータセット オプションにフォールバックし、次に関連するオプションにフォールバックします。elements.point.*
オプション。
ラインのスタイリング
線のスタイルは、次のプロパティで制御できます。
名前 | 説明 |
---|---|
backgroundColor |
線の塗りつぶしの色。 |
borderCapStyle |
ラインのキャップスタイル。見るMDN。 |
borderColor |
線の色です。 |
borderDash |
ダッシュの長さと間隔。見るMDN。 |
borderDashOffset |
破線のオフセット。見るMDN。 |
borderJoinStyle |
ラインジョイントスタイル。見るMDN。 |
borderWidth |
線幅 (ピクセル単位)。 |
fill |
線の下の領域を埋める方法。見る面グラフ。 |
lineTension |
線のベジェ曲線の張力。直線を描画するには 0 に設定します。 |
spanGaps |
true の場合、データがないか null のデータを持つ点の間に線が描画されます。 false の場合は、NaN データにより行に切れ目が作成されます。 |
値がundefined
、spanGaps
関連するものへのフォールバックチャート構成オプション。残りの値は、関連する値にフォールバックされます。elements.line.*
オプション。
インタラクション
各ポイントとの相互作用は、次のプロパティで制御できます。
名前 | 説明 |
---|---|
pointHoverBackgroundColor |
ホバー時のポイントの背景色。 |
pointHoverBorderColor |
ホバーしたときのポイントの境界線の色。 |
pointHoverBorderWidth |
ホバー時のポイントの境界線の幅。 |
pointHoverRadius |
ホバー時のポイントの半径。 |
構成オプション
レーダー チャートは次の構成オプションを定義します。これらのオプションは、グローバル チャート構成オプションとマージされます。Chart.defaults.global
、チャートに渡されるオプションを形成します。
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
spanGaps |
boolean |
false |
false の場合、NaN データにより行が中断されます。 |
スケールオプション
レーダー チャートは 1 つのスケールのみをサポートします。このスケールのオプションは、scale
財産。
このスケールのオプションは、scale
プロパティから参照できます。リニアラジアル軸ページ。
options = {
scale: {
angleLines: {
display: false
},
ticks: {
suggestedMin: 50,
suggestedMax: 100
}
}
};
デフォルトのオプション
作成されたすべてのレーダー チャートに構成設定を適用することが一般的です。グローバルレーダーチャート設定は次の場所に保存されます。Chart.defaults.radar
。グローバル オプションを変更すると、変更後に作成されたグラフにのみ影響します。既存のチャートは変更されません。
データ構造
のdata
レーダー チャートのデータセットのプロパティは、数値の配列として指定されます。データ配列内の各点は、同じインデックスのラベルに対応します。
data: [20, 10]
レーダー チャートの場合、各ポイントが意味するコンテキストを提供するために、チャート内の各ポイントの周囲を示す文字列の配列が含まれます。
data: {
labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
datasets: [{
data: [20, 10, 4, 2]
}]
}