From ae1770a513f9c114bb2870f129761a9943ccee7c Mon Sep 17 00:00:00 2001 From: kazu634 Date: Thu, 18 Jun 2020 21:17:52 +0700 Subject: [PATCH] =?UTF-8?q?=E7=A9=8D=E3=81=BF=E4=B8=8A=E3=81=92=E6=A3=92?= =?UTF-8?q?=E3=82=B0=E3=83=A9=E3=83=95=E3=81=AE=E8=AA=AC=E6=98=8E=E3=83=BB?= =?UTF-8?q?=E3=82=B0=E3=83=A9=E3=83=95=E3=82=92=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 | 54 +++++++++++++++++++ 1 file changed, 54 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 6febb79..002834d 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 @@ -293,8 +293,62 @@ chart=true {{< /chart >}} ### 積み上げ棒グラフ +積み上げ棒グラフの特徴は以下のように説明されていました: +> そもそも積み上げ棒グラフとは、棒グラフを改良させたグラフです。基本は棒グラフの表現をしているので、データ項目同士の「比較」もデータ項目の内訳の「比較」も把握できます。だから、円グラフの「総量がわからないので違う円グラフの内訳と比較できない」というデメリットを解消できるのです。高さを比べて量の大小を感覚的につかめる棒グラフの特徴を活かして、積み上げた棒の高さをそれぞれ比べられるのです。送料に対する内訳の表現を円ではなく、棒の高さで表現しているからです。 +> 積み上げ棒グラフは、棒の中に必ず複数のデータ項目を描きます。棒の内訳に1つのデータ項目しかない積み上げ棒グラフは、何も積み上げていないので単なる棒グラフです。そんな積み上げ棒グラフを目にする機会は少ないでしょう。積み上げ棒グラフでは、あるデータ項目の内訳の高さを比べて「全体に対して占める割合が大きい(小さい)データ量はどれだろう？」と考えます。つまり積み上げ棒グラフが一番得意な表現方法は、データ全体の「内訳」の「比較」です。積み上げ棒グラフは、各データ項目が全体に対して占める割合を比べやすいように図で表現できます。 + +> 積み上げ棒グラフは、円グラフが得意とする「内訳」と棒グラフが得意とする「比較」のどちらを強調したいか決めれば、何が言いたいのかより伝わります。 + +{{}} + var ctx = document.getElementById("stacked-bar-chart"); + var myBarChart = new Chart(ctx, { + type: 'bar', + data: { + 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] + }] + }, + 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: { + 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)