Work Life Fun

Chart.jsで人口ピラミッドを作成(福岡県1985年・2015年・2045年)

作成:
タグ: 統計

人事労務の実務を行う上で、従業員の年齢別人数・分布を把握しておくことは重要です。

そんな中、人口ピラミッドのようなグラフを簡単に作れないか、当ブログのグラフでよく用いているJavaScriptのツール「Chart.js」でどのように作るか調べました。

Chart.jsで人口ピラミッドを作成する解説動画

Chart.jsはバージョンが頻繁に更新されており、残念ながら日本語による解説記事で条件にマッチするものはありませんでした。

ただ、英語による動画では、以下のリンク先には段階的な解説があり、すばらしい内容でしたのでシェアします。

福岡県の人口ピラミッド:1985年・2015年・2045年(推計)

上で紹介した動画をもとに、せっかくなので総務省の統計Dashboardから、福岡県のデータを用いてChart.jsによる人口ピラミッドを作成してみました。

確定している最新のデータが2015年なので、その前後30年である1985年と2045年のデータを今回入れてみました。

なお、利用しているのは現時点で最新版のChart.js v3.6.2です。

注意

以下は本来であればグラフが表示されます。
もしグラフが表示されていない場合はページの更新をしてください。

PCであればグラフにマウスを置く、スマホ・タブレットであればグラフにタッチすれば、データが表示されます。

改善点

今回作成した人口ピラミッドの改善点として、すぐに目に付くのは、

  • 横軸(X軸)、tooltip(吹き出し)の数字を3桁ごとにカンマ(,)を入れるべき

という点ですが、今回はこれ以上追求しないことにします。

今後この人口ピラミッドを社労士業務で利用する可能性があるのは「従業員の年齢別ピラミッド」です。その場合、1つの年齢区分で1000を超えることはほぼゼロでしょうから。

ただ、吐き出しているtooltipの変数をconsole.logで確認してみると、formattedValueで、3桁区切りの数字が出せることまでは確認済みです。

といっても、シンプルにformattedValueに対して、絶対値変換(Math.abs)をしてもNaNとなるので、一工夫は必要そうですが3桁ごとにカンマ(,)を入れるのは、それほど難しくない気もします。

【無料】毎月1回、効率的に人事労務の情報を入手しませんか?

  • 毎年のように改正される労働法令への対応に頭を悩ませている
  • 働き方の見直しといっても、具体的な実務でどう対応すれば良いかわからない
  • 総務や経理などの他の業務を兼務しているので、人事労務業務だけに時間を割けない

といった悩みを抱える経営者・人事労務担当者向けに、公開型のブログでは書けない本音を交えた、人事労務に関する情報・ノウハウ、時期的なトピックをメールマガジンを配信しています。

過去の配信分は公開しません。情報が必要な方は、いますぐ以下のフォームから購読の登録をしてください。購読して不要と思ったら簡単に解除できますのでご安心ください。

なお、あべ社労士事務所では、信頼できる社労士仲間を増やしていきたいという想いから、社労士が業務を行う上で役立つ情報提供も行っています。ご関心があればこちらをクリックしてご登録ください。