Chart.js - にほんご。

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

名称type説明
labelstring凡例とツールチップに表示するデータセットのラベル。
backgroundColorcolor線の内側を塗りつぶす色。カラーを参照してください。
borderColorcolor線の色。カラーを参照してください。
borderWidthnumber線の太さ(px)。
borderDashnumber[]線の長さとスペース間隔(ダッシュ構成)。 (MDNを参照してください。)
borderDashOffsetnumberダッシュのオフセット。 (MDNを参照してください。)
borderCapStylestring線の先端のスタイル。 (MDNを参照してください。)
borderJoinStylestring線の接合点のスタイル。 (MDNを参照してください。).
fillboolean/string線の下をどのように塗りつぶすか。エリアチャート(Area)を参照してください。
lineTensionnumberベジェ曲線のテンション(張力)。 0を指定すると直線になります。
pointBackgroundColorcolor/color[]ポイントを塗りつぶす色。
pointBorderColorcolor/color[]ポイントの枠線の色。
pointBorderWidthnumber/number[]ポイントの枠線の太さ(px)。
pointRadiusnumber/number[]ポイントの半径。0を指定した場合、ポイントは非表示になります。
pointStylestring/string[]/image/image[]ポイントのスタイル。 詳しくはpointスタイルを参照してください。
pointHitRadiusnumber/number[]マウスイベントを発生させる非表示ポイントのサイズ。
pointHoverBackgroundColorColor/Color[]ホバーした時のポイントの背景色。
pointHoverBorderColorColor/Color[]ホバーした時のポイントの枠線の色。
pointHoverBorderWidthnumber/number[]ホバーした時のポイントの枠線の太さ。
pointHoverRadiusnumber/number[]ホバーした時のポイントの半径。

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]

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

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

© 2013 Chart.js is available under the MIT license

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