Chart.js - にほんご。

レーダーチャート(Radar)

更新日: 2019-05-31

レーダーチャート(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番目以降も同様です。

名称typescriptableindexable初期値
backgroundColorカラー--'rgba(0, 0, 0, 0.1)'
borderCapStylestring--'butt'
borderColorカラー--'rgba(0, 0, 0, 0.1)'
borderDashnumber[]--[]
borderDashOffsetnumber--0.0
borderJoinStylestring--'miter'
borderWidthnumber--3
fillboolean, string--true
labelstring--''
lineTensionnumber--0.4
pointBackgroundColorカラー'rgba(0, 0, 0, 0.1)'
pointBorderColorカラー'rgba(0, 0, 0, 0.1)'
pointBorderWidthnumber,
number[]
1
pointHitRadiusnumber,
number[]
1
pointHoverBackgroundColorカラーundefined
pointHoverBorderColorカラーundefined
pointHoverBorderWidthnumber,
number[]
1
pointHoverRadiusnumber,
number[]
4
pointRadiusnumber,
number[]
3
pointRotationnumber,
number[]
0
pointStylestring,
string[],
image,
image[]
'circle'

全般

名称説明
label凡例とツールチップに表示するデータセットのラベル。

ポイントスタイル

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

名称説明
pointBackgroundColorポイントを塗りつぶす色。
pointBorderColorポイントの枠線の色。
pointBorderWidthポイントの枠線の太さ(px)。
pointHitRadiusマウスイベントを発生させる非表示ポイントのサイズ。
pointRadiusポイントの半径。0を指定した場合、ポイントは非表示になります。
pointRotationポイントの角度。
pointStyleポイントのスタイル。 詳しくはpointスタイルを参照してください。

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


ラインスタイル

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

名称説明
backgroundColor線の内側を塗りつぶす色。カラーを参照してください。
borderCapStyle線の先端のスタイル。 (MDNを参照してください。)
borderColor線の色。カラーを参照してください。
borderDash線の長さとスペース間隔(ダッシュ構成)。 (MDNを参照してください。)
borderDashOffsetダッシュのオフセット。 (MDNを参照してください。)
borderJoinStyle線の接合点のスタイル。
borderWidth線の太さ(px)。(MDNを参照してください。).
fill線の下をどのように塗りつぶすか。エリアチャート(Area)を参照してください。
lineTensionベジェ曲線のテンション(張力)。 0を指定すると直線になります。

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


インタラクション

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

名称説明
pointHoverBackgroundColorホバーした時のポイントの背景色。
pointHoverBorderColorホバーした時のポイントの枠線の色。
pointHoverBorderWidthホバーした時のポイントの枠線の太さ。
pointHoverRadiusホバーした時のポイントの半径。

設定オプション

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


設定オプション

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


スケールオプション

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

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

デフォルトオプション

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


データ構造

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

data: [20, 10]

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

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


© 2013 Chart.js is available under the MIT license

このコンテンツはChart.jsドキュメントを翻訳/改変したものです。