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回、無料・本音で回答します。

ご質問・ご相談は、登録後に届くメールから送っていただけます。費用は一切かかりません。「お悩み相談室」というクローズドな場だからこそ、踏み込んだ内容の質問にも回答できます。

これまでに、こんなご質問・ご相談に回答してきました。

  • コンサル(3号業務)を主力業務にするには、どうすれば良いか?
  • どのようにして顧問料を上げれば良いか?
  • 営業が苦手で、新規の顧客獲得ができない
  • 業務をどう絞り込めば良いか?
  • 一人社労士のままで良いのか、人を雇うべきか?
  • 苦手・相性の悪い顧問先と、どう付き合うか?
  • 生成AIの時代、社労士は今後どう生き残るか?

なぜ、無料で同業の社労士からの相談に乗るのか?

それは「本当に顧客のために活動できる社労士仲間を増やしたい」からです。

私自身、社労士という資格に誇りを持っています。企業からの社労士に対する不満をよく聞きますし、「社労士なんて役に立たない」と思われることは、正直悔しいです。

  • 信頼される・信頼できる社労士の仲間を増やしていきたい

そんな想いから、少しでも社労士業界全体のレベルアップに貢献できればと考えています。

    登録は無料・月1回配信・配信解除いつでも可能
    ※ 登録後、本人確認のメールをお送りします。届かない場合は迷惑メールフォルダもご確認ください。


    up_line