WordPressでChart.jsを使うときの注意点と対処法について

ブログやサイトに記事を書くときだけでなく、プレゼンや普段の会話でも、あることを主張する(理解してもらう)ためにはその根拠となるものがないとなかなか理解してもらえませんよね。

その根拠として相手方に提示するものの代表的なもの言えば「データ」ですが、そのデータをグラフ化することで視覚的に訴えることができるというわけです。

では、グラフをサイトやブログで描画するためによく使われている「Chart.js」を紹介していくのですが、これはWordPressで利用することを前提として話を進めていきます。

基本的な使い方にはある程度触れていきますが、それら内容に関しては他のサイトやブログにもたくさん載っていますので端折るところが多々あるかと思います。この記事ではWordPressで利用するときの注意点をメインに記事を構成していきますのでご了承ください。

基本的な使い方についてはこちらの記事が分かりやすいと思います。

Chart.js
Chart.js v2.0でシンプルなグラフを描画してみる [Canvas]

Chart.jsでグラフを描画する

Chart.jsを使う準備

まずはjsファイルをGitHubからダウンロードしたファイルをサーバーへアップして<head></head>内で読み込むCDNを利用するかどちらかでファイル読み込みを行います。

jsファイルをアップロードしてhead内に読み込む方法としてfunctions.phpに記述して読み込む方法もあります。

上のソースをfunctions.phpの最後にでも追記してやればOKです。

グラフデータなどの設定

描画できるグラフは折れ線グラフ棒グラフレーダーチャートパイチャートドーナツチャートなどになっており、アニメーション機能もついています・

ここではサンプルとしてレーダーチャートを描写するための設定を書いていきます。

公式サイトに書いている内容に少し手を加えた程度のものです。

optionsでもっと細かい設定ができますので、興味がある方は公式サイトかその他詳しく書いているサイトを確認してみてください。

設定したグラフの表示

グラフを表示したい場所に以下のhtmlを書いてください。

style=”width: 100%”としているのはレスポンシブに対応するためのおまじないみたいなものですので、そのまま書いてもらった方がいいかもしれません。

Chart.jsをWordPressで使うときの注意点

なぜかcanvasタグが消えてしまう…

ここまでの内容でグラフが表示されるはずなんですが…

WordPressの場合、htmlを書き込む時はビジュアルではなくテキストを利用するかと思います。

chart1

このような形ですね。そして、文章を入力する場合はビジュアルを使って入力して文字装飾などを行いますよね。

すべてチェックしてレビューをしてみると、あら不思議。

グラフがまったく表示されていないというなんとも不可思議な状態になってしまっています。

chart2

原因を究明すべく、あれこれ調べてみた結果ひとつの答えにぶつかりました。

なぜ表示されないかというと、WordPressで記事入力する際にビジュアルとテキストを切り替えるのですが、そのときにどうやらcanvasタグが消えるといったことが起こるようです。

改行をすれば直るといったような解決法を書いていたので試してみましたが、それでもグラフは表示されませんでした。

で、結局どうやって解決したかというと、canvasタグをショートコードで書き出すという方法を使ったというわけです。では、実際にどのようにやったかを説明していきます。

まずfunctions.phpに以下のソースを追記します。

heightとwidthは自由に変更してください。これでショートコードを書けばcanvasタグが書き出されるようになりました。

次に記事本文中へ以下のように書き込んでください。

実際にはこんな感じになります。

chart3

ここでビジュアルとテキストをパチパチ切り替えてからプレビューボタンをクリックすると…

chart4

このような形で無事に表示されました。

外部のjsファイルから読み込みをするとエラーを吐き出す

外部のファイルへjavascriptを書いてヘッダーやフッターで読み込む方法でもグラフの表示はされるのですが、複数のグラフを同一ページ内ではなく複数のページでそれぞれのグラフデータを読み込みをするときにエラーが出てしまいグラフが上手く表示されないといったことがあります。

chart5

このようなエラーが出てグラフが表示されなくなります。

これは使用しているテーマなどによってはエラーが出ない場合もあるかと思いますので、問題なくグラフが表示されるのであればスルーしてください。

では、このエラーに対する対処法はこちらです。

これはなにをしているかというと

ここでrdchartというidがあった場合にグラフを描画するようにしています。jsファイルに複数のグラフデータを書いたときにエラーが頻発したので、このような形にして対応するidを持つ要素があるときにだけ動くようにしました。

おわりに

Chart.jsはいろいろな方が関連記事を書かれているので、困ったことがあればある程度は解決できるかなと思います。

この点についてはありがたかったですね。

この記事も参考にした記事と同様に読んだ人のトラブル解決の役に立てればうれしいです。