WordPressでChart.jsを読み込んでグラフ描画

WordPressでブログやってると、たま~に記事の中でグラフ描画させたいことがある。

一応WordPressでグラフ描画できるプラグインはあるけど、正直使い勝手悪かった。CSV読み込ませたりとか、サイズ調整が難しかったり。まあ無料なんで文句言えんけど…

以前業務上でもグラフ描画する案件あって、たまたまChart.jsを使っていた。使い勝手も良く、当ブログの一部記事でも利用してるので、WordPressでの導入手順をご紹介。

スポンサーリンク

子テーマのfunction.phpで指定jsを読み込む

WordPressに自前で作ったJavaScriptCSSを読み込ませる方法は幾つかあるみたい。

ただしwp_enqueue_scriptアクションに対して、ad_action関数でフックする方法が正解らしいので、今回は子テーマ(私の場合simplicity2)内のfunction.phpに登録↓↓↓

上の例ではwp_enqueue_scriptで2つの外部jsを登録。

chart.jsってgit上で公開されてるけど、自分の場合は内部js(core.jsだったかな)が取り込めず、ずっとコンソール上でエラーが消えなかった。当然グラフも描画出来ず…

解決するものメンドイし、chart.jsはCDNにも公開されてるので、上記方法で解決した。

2つ目のjsは自前の物で、wp-content配下の子テーマのディレクトリにjsディレクトリ作って入れてみた。格納先は各個人のお好みで!!

chart.jsを使ってグラフ描画を行う

自前で作ったJavaScriptの中身だけど、ここらへんは公式ホームページやネット上の参考ページ見ながら、コピペ&追記でよいと思われる(ここでは詳しく触れません)

当ブログでは、自分の資産推移や資産配分の記事で使っている↑↑↑

こんな感じで描画される↓↓↓

chart.jsは他にも棒グラフドーナツグラフなど6種類くらい描ける優れもの。またchart.jsを使わずとも、自前のjsやcssを取り込む方法は知っておいて損はない。

スポンサーリンク