静的に入力されたtableの値と、Chart.jsを連携してみた - Qiita

ある案件で、tableに入力された値と、Chart.jsを連携する実装がありました。 今回は円グラフを使用しましたが、他のグラフでも応用可能だと思います。 参考になれば、幸いです。 はじめに table構造はとてもシンプルです。 （実際の運用では、それぞれの数値に関してhtmlは触らずに、WordPressのカスタムフィールドでの運用を想定しています。） See the Pen table - basic by dan (@___dan) on CodePen. このtableを元に、以下の2つのパターンを実装しました。 カテゴリ毎の合計値 （tableでは年度別の合計値が出力されているが、Chart.js上ではカテゴリ毎の合計値を出力する。） 対合計比 （総計を基準にし、各カテゴリの合計値が何%なのかを出力する。） 実装編 カテゴリ毎の合計値 See the Pen table(tota