レーダーチャート

レーダーチャートは、複数のデータ点とそれらの間の変動を表示する方法です。

これらは、2つ以上の異なるデータセットを比較する場合によく使用されます。

使用例

var myRadarChart = new Chart(ctx, {
    type: 'radar',
    data: data,
    options: options
});

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

レーダーチャートでは、各データセットに対していくつかのプロパティを指定できます。 これらは、特定のデータセットの表示プロパティを設定するために使用されます。 例えば、線の色は一般的にこの方法で設定されます。

すべてのpoint~プロパティは配列として指定できます。 これらが配列値に設定されている場合、最初の値は最初の点に適用され、2番目の値は2番目の点に適用されます。

pointStyle

点のスタイル。選択肢は次のとおりです。

• 'circle'
• 'cross'
• 'crossRot'
• 'dash'.
• 'line'
• 'rect'
• 'rectRounded'
• 'rectRot'
• 'star'
• 'triangle'

この設定が画像の場合、その画像はdrawImageを使用してキャンバスに描画されます。

設定オプション

他のチャートと異なり、レーダーチャートにはチャート固有のオプションはありません。

スケールオプション

レーダーチャートは単一のスケールのみをサポートします。 このスケールのオプションは、scaleプロパティで定義されています。

options = {
    scale: {
        // スケールを隠す。
        display: false
    }
};

デフォルトオプション

作成されるすべてのレーダーチャートに構成設定を適用したいと思うのが一般的です。レーダーチャートのグローバル設定は、Chart.defaults.radarにあります。グローバルオプションを変更すると、変更後に作成されたチャートにのみ影響します。既存のグラフは変更されません。

データ構造

レーダーチャートのデータセットのdataプロパティは数値の配列として指定されます。データ配列の各点は、x軸上の同じインデックスにあるラベルに対応します。

data: [20, 10]

レーダーチャートでは、各点の意味を示すために、グラフ各点の周りに表示される文字列の配列をlabelsへ渡すようにします。

data: {
    labels: ['ランニング', 'スイミング', '食べる', 'サイクリング'],
    datasets: [{
        data: [20, 10, 4, 2]
    }]
}