レーダーチャート(Radar)

レーダーチャート(RadarChart)は、複数のデータポイントと、それらの変化を示すための手法です。 2つ以上のデータセットのポイントを比較する際によく使われます。

使用例

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

データセットプロパティ

レーダーチャートは、各データセットに対して、いくつかのプロパティを指定することができます。 これらは特定のデータセットの表示プロパティを設定するために使用されます。 例えば、ライン(線)の色は通常このように指定することができます。

new Chart(ctx, {
  type: "radar",
  data: {
    datasets: [{
      borderColor: "rgb(255, 99, 132)",
    }, {
      borderColor: "rgb(54, 162, 235)",
    }]
  },
});

全てのpoint～プロパティは配列を指定することができます。 これらに配列が指定されている場合、最初の値は、最初のポイントの設定として適用され、 2番目の値は、2番目のポイントとして適用され、3番目以降も同様です。

全般

ポイントスタイル

各ポイントのスタイルは以下のプロパティで指定することができます。

undefinedの場合、どのプロパティも関連するelements.point.*にオプションにフォールバックします。

ラインスタイル

線のスタイルは以下のプロパティで指定することができます。

undefinedの場合、どのプロパティも関連するelements.line.*にオプションにフォールバックします。

インタラクション

各ポイントのインタラクションは以下のプロパティで指定することができます。

設定オプション

レーダーチャートは以下のオプションを定義します。 これらのオプションはグローバルチャートオプションのChart.defaults.globalにマージされます。

スケールオプション

レーダーチャートは単一のスケールのみをサポートしています。 スケールのオプションはscaleプロパティで定義されています。 詳細は線形軸(linear)で参照することができます。

options = {
    scale: {
        angleLines: {
            display: false
        },
        ticks: {
            suggestedMin: 50,
            suggestedMax: 100
        }
    }
};

デフォルトオプション

通常、生成する全てのレーダーチャートに構成オプションを適用します。 グローバルオプションはChart.defaults.radarに格納されます。 グローバルオプションを変更すると、変更後に生成されたチャートにのみ反映され、 すでに生成済みのチャートは変更されません。

データ構造

棒グラフのデータセットにあるdataプロパティは、 数値配列を指定することができます。 データ配列のそれぞれのポイントは、X軸上の同じインデックスのラベルに対応します。

data: [20, 10]

レーダーチャートでは、各ポイントが何を意味するかを示すために、 グラフの各ポイントの周りに表示する文字配列(ラベル)を含みます。

data: {
    labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
    datasets: [{
        data: [20, 10, 4, 2]
    }]
}