【Chart.js】ワードプレスの記事にグラフを入れる方法！（コピペでOK）

こんばんは。とらです。

ワードプレスであれしたい・これしたいで悪戦苦闘する時ありますよね？
つい先日僕も格闘したので、他の誰かの為に記事にしました。

テーマは「グラフ入れたいけど、どないしたらええねん？」です。

※2019年10月06日時点の記事です。

この記事を読むべき人

ブログ記事の中にちょっとしたグラフを入れたい場合に、
まず考えるのが表計算ソフト（エクセルとかスプレッドシート）でグラフを作って貼り付ける方法ですよね。
僕もそうだったんですけど、画像にすると作るのが手間だし、修正あるとさらに手間だし、
スマホで見た時に文字が読めなくなるのも嫌だし…と思って他の方法を考えました。

Chart.js（チャートジェイエス）とは？

javascriptのグラフ描画ライブラリなんですが…。
簡単に言うと、「Webサイト上で簡単にグラフ表示サセール」です（笑）

これを使うと、画像不要でグラフを表示させることができちゃいます。

↑こんな感じにグラフが作れます。
簡単なグラフであれば、十分事足りるぐらいの機能は備えています。

ただ、検索すると少し古いバージョンの説明が書いてあることもあり、
僕もちょっとつまづきました（汗）。

ワードプレスをカスタマイズする（コピペでOK）

まずは記事ごとに個別のjavascriptファイルが読み込めるように、設定します。
（ブログの全てのページでグラフ表示させたい人はいないと思うので）

設定についてはプラグインを使う手もあるのですが、
下記の記事で設定する方が都合が良さそうだったのでこちらを参考に、
まずはfunction.phpを編集します。（コピペでOK）

※編集したらこちらに戻ってきてください。

[WordPress]「この記事だけで使うCSS、JavaScript」をカスタムフィールドで記述するためのカスタマイズ

編集が完了し、保存できたら記事の編集画面に
「この記事限定のCSS,Javascript」というスペースができると思います。
これで準備は完了です。

Chart.jsを設定する

さて、いよいよ「Webサイト上で簡単にグラフ表示サセール」を使います。

必要なファイルを読み込む

まずは先ほど設定した「この記事限定のCSS,Javascript」の中に
「CSS, JavaScript外部参照」という入力欄があると思います。

そこに下記のコードをコピペします。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>

Chart.js本体とラベル表示用のプラグインファイルです。

グラフの設定

今回使った設定をまず書きます。
これを「JavaScript内部参照（/bodyタグの真上に出力）」の欄に入れてください。
「円グラフ・数字は3つ」のバージョンです。

See the Pen
vYYYRYK by jun16o (@jun16o)
on CodePen.

「type: ‘pie’」これが円グラフです。※折れ線はline、棒グラフはbarです。
他の細かい設定はこちらでどうぞ。

グラフに使う数字は「data: {」以下に書きます。
今回は3つの数字を使ったグラフなので、ラベル・背景色・データを3つずつ書きます。

ここまででも十分なのですがラベルは表示させておきたいなと思い、プラグインを使いました。
「options:{」以下の「plugins: {」の部分です。
ここに細々とした設定を書きます。
renderの部分は「ラベル＋数字」を表示させたかったのでカスタム設定にしています。
（return以降の部分が表示されるものです）

あと、ラベルが重なるのが嫌だったので「overlap: false」を付けてます。
これでラベルが重なりません。（重なる場合はラベル非表示になります）

ラベル表示に関する細かい設定はこちらでどうぞ。（英語ですが、なんとなくわかると思います）

記事上にグラフを表示

「必要ファイルの読み込み」「グラフの設定」までで準備は完了です。
あとは表示させたい箇所に下記を記述しましょう。
※「テキスト」タブにして書き込みしてください！※タグが自動で消されてしまう場合は、前後の行が空白行にならないようにしてください。

See the Pen
vYYYRYK by jun16o (@jun16o)
on CodePen.

これで「プレビュー」すると、表示されているかと思います！
おめでとうございます！
「ビジュアル」タブで見た時には表示されないので、気を付けてください。

まとめ

今回はワードプレスの記事上でグラフを表現する方法について書きました。