ネットをしているとよく見るグラフですが、実際に自分で作るとなると途端に機会が少なくなる(気がする)グラフ描画。

数あるライブラリの中から、今回はchart.jsを紹介します。
そして、このライブラリを使って描画したグラフをwordpressの固定ページに表示する方法も一緒にご紹介したいと思います。

ライブラリの設置

chart.jsは、githubもしくはCDNからライブラリを取得します。
今回は手っ取り早くCDNを紹介してしまいますが、いずれも利用するファイルは「Chart.js」になります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>

ここまで書いておいて急に乱暴になりますが、、chart.jsは非常に高機能なライブラリになります。
こちらの記事が非常に分かりやすかったので、こちらを参考にグラフを作成してみてください。

・・・

設置できましたか?w

作成したグラフをWordPressに設置する

chart.jsは<canvas>タグを利用してグラフ描画をするライブラリになります。

以前の記事でご紹介しましたが、WordPressでは予め利用できるタグが決まっており、canvasタグは利用できないタグの一つになっています。

過去記事を参考にcanvasタグを有効にした後、上記で作成したスクリプトを使って投稿してみてください。

ライブラリの設定値が多いと投稿画面の見通しが悪くなりメンテナンス性に欠けてしまう所がデメリットですが、その辺りを考慮するとjson形式など数値管理用に別ファイルを用意した方が良いかも知れません。

Similar Posts