From 75b104d0e4b02fb09fc1de81df216a43447b2c15 Mon Sep 17 00:00:00 2001
From: kazu634 <simoom634@yahoo.co.jp>
Date: Thu, 18 Jun 2020 21:53:03 +0700
Subject: [PATCH] =?UTF-8?q?=E9=9D=A2=E3=82=B0=E3=83=A9=E3=83=95=E3=82=92?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2020-06-13-different-types-of-graphs.md   | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md
index 0423758..8250b33 100644
--- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md
+++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md
@@ -421,5 +421,53 @@ chart=true
   });
 {{< /chart >}}
 
+### 面グラフ
+
+{{<chart canvas="stacked-ratio-bar-chart" height="200">}}
+  const loggedIn = [26, 36, 42, 38, 40, 30, 12];
+  const available = [34, 44, 33, 24, 25, 28, 25];
+  const availableForExisting = [16, 13, 25, 33, 40, 33, 45];
+  const unavailable = [5, 9, 10, 9, 18, 19, 20];
+  const xData = [13, 14, 15, 16, 17, 18, 19];
+
+  var ctx = document.getElementById("stacked-ratio-bar-chart");
+  var myBarChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: xData,
+      datasets: [{
+        label: "Unavailable",
+        fill: true,
+        borderCapStyle: 'butt',
+        data: unavailable
+      }, {
+        label: "Available for Existing",
+        fill: true,
+        borderCapStyle: 'butt',
+        data: availableForExisting
+      }, {
+        label: "Available",
+        fill: true,
+        borderCapStyle: 'butt',
+        data: available
+      }, {
+        label: "Logged In",
+        fill: true,
+        data: loggedIn
+      }]
+    },
+    options: {
+      responsive: false,
+      // Can't just just `stacked: true` like the docs say
+      scales: {
+        yAxes: [{
+          stacked: true,
+        }]
+      }
+    }
+  });
+{{< /chart >}}
+
+
 ## 参考
 - [Chart.jsでグラフを描画してみた - Qiita](https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369#3-2-%E6%A3%92%E3%82%B0%E3%83%A9%E3%83%95)