【Chart.js 3.7】よく見るグラフを実際に作ってみた(棒グラフ・折れ線グラフ・円グラフ・帯グラフ)

グラフには棒グラフや折れ線グラフなどいくつか種類があります。

データによって、どのグラフを使うと分かりやすいというものがあるので、実際にグラフを作ってみながら、特徴や適した使い方など理解を深めていければと思います。

スポンサーリンク

勉強のために使用させていただくデータについて

総務省統計局や環境省のデータを使用させていただいています。

下記ページ「サイトの利用について」に注意して使わせていただいています。誤った使い方をしている場合は、出来る限り早く修正しますので、コメント等よりご指摘いただけますと幸いです。

https://www.stat.go.jp/info/riyou.html

棒グラフ

棒の長さによって視覚的に大小の違いがよく分かるため、データの大小を比較したい場合に適しています。

例1

出典:総務省統計局ホームページ>都道府県庁所在市及び政令指定都市別「たらこ」への年間支出金額(平成 25~27 年平均) (https://www.stat.go.jp/data/kakei/tsushin/pdf/29_1.pdf

上記出典より、データを取得しています。

政令指定都市 年間支出金額(円)
全国 2,418
福岡市 6,989
北九州市 6,832
新潟市 3,751
青森市 3,740
秋田市 3,524

このデータと出典元を参考にグラフを作成してみました。全国と比較して、福岡や北九州が多いことが分かりやすいです。

 

例2

IRの財務情報などにも棒グラフがよく使われています。ここでは、適当に作ったデータでサンプルを作りたいと思います。

売上高(百万円) 営業利益(百万円)
2017年3月期 2,222 472
2018年3月期 2,434 680
2019年3月期 2,625 588
2020年3月期 2,524 375
2021年3月期 2,652 477

このデータからグラフを作成してみました。数年分の財務情報を並べることで、財務状況がどのように変化してきたか分かりやすいです。

折れ線グラフ

時系列など、連続的変化を見たいときに適しています。折れ線グラフの傾きによって、変化の大きさが見て取れます。

例1

出典:気象庁ホームページ>和歌山 2020年(月ごとの値) 主な要素 (https://www.data.jma.go.jp/obd/stats/etrn/view/monthly_s1.php?prec_no=65&block_no=47777&year=2020&month=1&day=&view=

上記出典より、降水量の合計のデータを取得しています。

降水量(mm)
1 78.5
2 62.0
3 89.0
4 99.5
5 113.5
6 211.5
7 438.5
8 13.0
9 153.5
10 309.0
11 62.5
12 27.0

このデータを元に出典元を参考にグラフを作成してみました。6月から7月へと梅雨の時期に降水量が増えるのがよく分かります

円グラフ

円グラフとは、円全体を100%として、その中に占める項目の構成比を扇形で表したグラフです。その各扇形の面積によって、どれくらいの割合かが分かります。

例1

出典:総務省統計局ホームページ表1 年齢3区分別人口及び割合(2020年、2021年)- 9月15日現在 資料:「人口推計」https://www.stat.go.jp/data/topics/topi1291.html

上記出典より、2021年9月15日時点の日本の年齢別の人口の人数データを取得しています。単位は千人に変更しました。

区分 人口(千人)
総人口 125,220(1憶2,522万人)
15歳未満 14,810(1,522万人)
15歳~64歳 74,020(7,402万人)
65歳以上 36,400(3,640万人)

このデータを元にグラフを作成してみました。65歳以上の方が全体の3割くらいを占めていることがよく分かります

帯グラフ

帯グラフは、円グラフと同じく全体を100%として、その中に占める項目の構成比をチェックできるグラフです。さらに帯グラフを並べると経過ごとにどのように割合が変化したか分かりやすくなります。

例1

出典:総務省統計局ホームページ>表4 年齢3区分別人口の推移(1950年~2019年)(https://www.stat.go.jp/data/jinsui/2019np/pdf/2019np.pdf

上記出典より、総人口に占める割合のデータを使って、帯グラフを作成しました。

年次  総人口に占める割合 (%)
15歳未満 15~64歳 65歳以上
1950 35.4 59.7 4.9
1960 30.0 64.2 5.7
1970 23.9 69.0 7.1
1980 23.5 67.4 9.1
1990 18.2 69.7 12.1
2000 14.6 68.1 17.4
2010 13.1 63.8 23.0
2019 12.1 59.5 28.4

このデータを元にグラフを作成してみました。65歳以上の割合が大きくなり、高齢化が進んでいることがよく分かります

まとめ

以上、まだまだ多くのグラフが存在するかと思いますが、Chart.jsでけっこう再現できるように思います。

画像とは違い、Chart.jsは数値を変えるだけでグラフが更新されます。たとえば、Wordpressで数値を登録するようにすれば、財務情報など定期的に追加したい情報や修正したい情報など手間が省けると思います。

実際にIR情報で対応したことがありますが、4半期に一度更新されているようです。

それでは、最後までお読みいただきありがとうございました!

スポンサーリンク