From 2efd801d8930e0c3d068687668947de4c87877fb Mon Sep 17 00:00:00 2001
From: kazu634 <simoom634@yahoo.co.jp>
Date: Thu, 18 Jun 2020 21:25:24 +0700
Subject: [PATCH] =?UTF-8?q?=E5=86=85=E8=A8=B3=E3=82=92=E9=87=8D=E8=A6=96?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=E5=A0=B4=E5=90=88=E3=80=81=E6=AF=94=E8=BC=83?=
 =?UTF-8?q?=E3=82=92=E9=87=8D=E8=A6=96=E3=81=99=E3=82=8B=E5=A0=B4=E5=90=88?=
 =?UTF-8?q?=E3=81=AE=E5=90=84=E5=A0=B4=E5=90=88=E3=81=AB=E3=81=A4=E3=81=84?=
 =?UTF-8?q?=E3=81=A6=E8=AA=AC=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2020-06-13-different-types-of-graphs.md   | 43 +++++++++++++++++++
 1 file changed, 43 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 002834d..1538ec6 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
@@ -299,8 +299,16 @@ chart=true
 
 > 積み上げ棒グラフは、棒の中に必ず複数のデータ項目を描きます。棒の内訳に1つのデータ項目しかない積み上げ棒グラフは、何も積み上げていないので単なる棒グラフです。そんな積み上げ棒グラフを目にする機会は少ないでしょう。積み上げ棒グラフでは、あるデータ項目の内訳の高さを比べて「全体に対して占める割合が大きい(小さい)データ量はどれだろう？」と考えます。つまり積み上げ棒グラフが一番得意な表現方法は、データ全体の「内訳」の「比較」です。積み上げ棒グラフは、各データ項目が全体に対して占める割合を比べやすいように図で表現できます。
 
+以下の説明で書かれているように、積み上げ棒グラフには2種類の読み方がある:
+
 > 積み上げ棒グラフは、円グラフが得意とする「内訳」と棒グラフが得意とする「比較」のどちらを強調したいか決めれば、何が言いたいのかより伝わります。
 
+1. 「比較」を重視する作り方
+2. 「内訳」を重視する作り方
+
+#### 比較を重視する積み上げ棒グラフ
+比較を重視した場合は、総量を純粋に積み上げて、以下のようなグラフを利用することになりそう:
+
 {{<chart canvas="stacked-bar-chart" height="200">}}
   var ctx = document.getElementById("stacked-bar-chart");
   var myBarChart = new Chart(ctx, {
@@ -350,5 +358,40 @@ chart=true
   });
 {{< /chart >}}
 
+#### 内訳を重視する積み上げ棒グラフ
+内訳を重視した場合は、総量に対する割合を積み上げて、以下のようなグラフを利用することになりそう:
+
+{{<chart canvas="stacked-ratio-bar-chart" height="200">}}
+  var mychart = new Chart(document.getElementById("stacked-ratio-bar-chart"), {
+    type: "bar",
+    data: {
+      labels: ["Foo", "Bar"],
+      datasets: [{
+        label: "bad",
+        data: [5, 25]
+    },
+      {
+        label: "better",
+        data: [15, 10]
+    },
+      {
+        label: "good",
+        data: [10, 8]
+      }
+    ]},
+    options: {
+      plugins: {
+        stacked100: {
+          enable: true
+        },
+        colorschemes: {
+          scheme: 'tableau.Tableau20',
+          fillAlpha: 0.3
+        }
+      }
+    }
+  });
+{{< /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)