折れ線グラフの記事を追加

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

@@ -22,7 +22,6 @@ chart=true
 > 
 > 「高さ」を比べて項目の量の違いを感覚的につかめるのが棒グラフの特徴です。
 
-
 {{<chart canvas="box" height="200">}}
     var ctx = document.getElementById('box');
     var myChart = new Chart(ctx, {
@@ -68,3 +67,52 @@ chart=true
 
 > 棒グラフの一番得意な表現方法は「比較」だと述べました。しかし、単純に「比較」するといっても、どのようにデータ項目を並べるかで伝わり方は大きく変わります。棒グラフを作成する秘訣は、何を「比較」するためにデータ項目を並べるか、その順番にあると言っても、過言ではありません。
 
+### 折れ線グラフ
+折れ線グラフの特徴に以下のようにまとめられていました:
+
+> 折れ線グラフは必ずデータ項目の複数の時点を描きます。点を一つだけ描く折れ線グラフを目にする機会はないでしょう。
+> 
+> 折れ線グラフでは、ある時点とある時点を左から右に線で結んで「線の傾きが大きい(小さい)時点はどれだろう？」、「傾きの傾向が変化するのはどの時点だろう？」と考えます。つまり折れ線グラフが一番得意な表現方法はデータの「推移」です。折れ線グラフを使えば、データの変化を最もわかりやすく図で表現できます。
+> 
+> ある時点とある時点の間の「傾き」から変化を感覚的につかめるのが折れ線グラフの特徴です。
+
+{{<chart canvas="line-chart" height="200">}}
+    var ctx = document.getElementById('line-chart');
+    var myChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+        labels: ['2015', '2016', '2017', '2018', '2019', '2020'],
+        datasets: [{
+            label: '# of Votes',
+            data: [12, 19, 3, 5, 2, 3],
+            backgroundColor: [
+                'rgba(255, 99, 132, 0.2)',
+                'rgba(54, 162, 235, 0.2)',
+                'rgba(255, 206, 86, 0.2)',
+                'rgba(75, 192, 192, 0.2)',
+                'rgba(153, 102, 255, 0.2)',
+                'rgba(255, 159, 64, 0.2)'
+            ],
+            borderColor: [
+                'rgba(255, 99, 132, 1)',
+                'rgba(54, 162, 235, 1)',
+                'rgba(255, 206, 86, 1)',
+                'rgba(75, 192, 192, 1)',
+                'rgba(153, 102, 255, 1)',
+                'rgba(255, 159, 64, 1)'
+            ],
+            borderWidth: 1
+        }]
+    },
+    options: {
+        scales: {
+            yAxes: [{
+                ticks: {
+                    beginAtZero: true
+                }
+            }]
+        }
+    }
+});
+{{< /chart >}}
+