From 21b6101eb904235eabcd1f12d0077ab0142b9f91 Mon Sep 17 00:00:00 2001
From: kazu634 <simoom634@yahoo.co.jp>
Date: Thu, 18 Jun 2020 21:33:28 +0700
Subject: [PATCH] =?UTF-8?q?100%=E7=A9=8D=E3=81=BF=E4=B8=8A=E3=81=92?=
 =?UTF-8?q?=E6=A3=92=E3=82=B0=E3=83=A9=E3=83=95=E3=81=AE=E3=83=87=E3=83=BC?=
 =?UTF-8?q?=E3=82=BF=E3=82=92=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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 67ecec0..3fa608e 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
@@ -359,37 +359,57 @@ chart=true
 {{< /chart >}}
 
 #### 内訳を重視する積み上げ棒グラフ
-内訳を重視した場合は、総量に対する割合を積み上げて、以下のようなグラフを利用することになりそう:
+内訳を重視した場合は、総量に対する割合を積み上げて、合計が100%になるようにした、以下のようなグラフを利用することになりそう:
 
 {{<chart canvas="stacked-ratio-bar-chart" height="200">}}
-  var mychart = new Chart(document.getElementById("stacked-ratio-bar-chart"), {
-    type: "bar",
+  var ctx = document.getElementById("stacked-bar-chart");
+  var myBarChart = new Chart(ctx, {
+    type: 'bar',
     data: {
-      labels: ["2020/01", "2020/02"],
-      datasets: [{
-        label: "bad",
-        data: [5, 25]
+      labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日', '8月6日', '8月7日'],
+      datasets: [
+        {
+          label: 'A店 来客数',
+          data: [62, 65, 93, 85, 51, 66, 47]
+      },{
+          label: 'B店 来客数',
+          data: [55, 45, 73, 75, 41, 45, 58]
+      },{
+          label: 'C店 来客数',
+          data: [33, 45, 62, 55, 31, 45, 38]
+      }]
     },
-      {
-        label: "better",
-        data: [15, 10]
-    },
-      {
-        label: "good",
-        data: [10, 8]
-      }
-    ]},
     options: {
+      title: {
+        display: true,
+        text: '支店別 来客数'
+      },
+      scales: {
+        xAxes: [{
+          stacked: true
+        }],
+        yAxes: [{
+          stacked: true,
+          ticks: {
+            suggestedMax: 250,
+            suggestedMin: 0,
+            stepSize: 10,
+            callback: function(value, index, values){
+              return  value +  '人'
+            }
+          }
+        }]
+      },
       plugins: {
-        stacked100: {
-          enable: true
-        },
         colorschemes: {
           scheme: 'tableau.Tableau20',
           fillAlpha: 0.3
-        }
-      }
-    }
+        },
+        stacked100: {
+          enable: true
+        },
+      }  
+    },
   });
 {{< /chart >}}