レーダーチャートの説明を追加

This commit is contained in:
Kazuhiro MUSASHI 2020-06-14 12:00:24 +07:00 committed by Gitea
parent dc587fbf02
commit 9ff8bf6e68
1 changed files with 45 additions and 1 deletions

View File

@ -163,5 +163,49 @@ chart=true
- 総量がわからないので違う円グラフの内訳と比較できない - 総量がわからないので違う円グラフの内訳と比較できない
- 時系列データを用いた時間経過による内訳の推移を表現できない - 時系列データを用いた時間経過による内訳の推移を表現できない
### レーダーチャート
レーダーチャートの特徴は以下のようにまとめられていました:
- レーダーチャートが一番得意な表現方法は複数あるデータ項目の「比較」
- 線で結ばれた面の「大きさ」、「滑らかさ」を比べてデータの代償を感覚的に掴めるのがレーダーチャートの特徴
- 特定のデータ項目のみに現れた傾向を比較したいのか、データ項目同士を比較したいのか、グラフを作る前に方針を決めておく
{{<chart canvas="radar-chart" height="200">}}
var ctx = document.getElementById("radar-chart");
var myPieChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ["English", "Math", "Japanese", "Science", "History"],
datasets: [{
label: 'Alice',
data: [92, 72, 86, 74, 86],
backgroundColor: 'RGBA(225,95,150, 0.5)',
borderColor: 'RGBA(225,95,150, 1)',
borderWidth: 1,
pointBackgroundColor: 'RGB(46,106,177)'
}, {
label: 'Bob',
data: [73, 95, 80, 87, 79],
backgroundColor: 'RGBA(115,255,25, 0.5)',
borderColor: 'RGBA(115,255,25, 1)',
borderWidth: 1,
pointBackgroundColor: 'RGB(46,106,177)'
}]
},
options: {
title: {
display: true,
text: 'Test Results'
},
scale:{
ticks:{
suggestedMax: 100,
suggestedMin: 0,
stepSize: 10,
callback: function(value, index, values){
return value + '点'
}
}
}
});
{{< /chart >}}