レーダーチャートの説明を追加
This commit is contained in:
parent
dc587fbf02
commit
9ff8bf6e68
|
@ -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 >}}
|
||||||
|
|
Loading…
Reference in New Issue