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

content/labs/visualization/2020-06-13-different-types-of-graphs.md

@@ -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 >}}