読者の悩み
- WordPressでグラフを表示させたい
- 折れ線グラフだけでなくて、棒グラフも表示できたらうれしい
- なんならどちらも表示させたい。簡単な方法でないですか?
こんな悩みに答える記事になっています。
ブログを運営中の人なら誰しも
- ブログ運営報告時にグラフを載せたい。
- 資産運用の結果をかっこよくのせたい
- グラフがあればもっと分かりやすく記事が書けそう!
・・・なんて思ったことがあると思います。
今回はプラグインを使用せずにグラフをWordPressの記事に挿入する方法をお伝えします。
この記事を参考にグラフを記事に挿入するだけで、表よりも分かりやすく記事が書けますのでぜひ試してみてください。
この記事の目次
WordPressでグラフを挿入したときの見た目
完成品の見た目は以下の通りです。
折れ線グラフだけでなく、棒グラフも載せることができます。
両者ともに、見たい部分をタップ/ホバーすることで詳細を見ることができます。
(リロードしたらわかると思いますが)表示の最中には動的に動いてくれるので、インパクトも強いですよね。
詳細を見たいという人にもわかりやすいので優秀!
そしてカッコイイ。
もちろん線の色なども変更可能ですので、ブログテーマカラーに合わせることも可能です。
【WordPressにグラフを載せる】Chart.jsの使い方
どのようにグラフを追加するのかを説明します。
コピペして、WordPressの記事編集画面のテキストモードの状態で貼り付けて、数値を変えるだけなので超簡単です。
グーテンベルクの場合は、カスタムHTMLブロックに貼りつけです!
Chart.jsというものを使用して、グラフを表示させます。
プラグインだとサイト全体が重くなる恐れがあるのですが、この方法だと重くなるのはグラフを載せたページのみです。
・・・といっても、微々たるものですので安心。
折れ線グラフのコード
まずは折れ線グラフのコードから。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> <canvas id="myChart" style="padding: 0px 10px 0px 10px;"></canvas> <script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ['1か月', '2か月', '3か月', '4か月', '5か月', '6か月'], datasets:[{ label: 'PV', data: [100, 200, 400, 1000, 2000, 5500], borderColor: "rgba(50,205,50,0.8)", backgroundColor: "rgba(50,255,50,0.8)", fill: false, lineTension: 0, } ] } }); </script>
これをWordPressの編集モードを「テキスト」の状態にして貼り付けるだけでできます。
いつも記事を書いている感覚で入れ込むだけですね。
その後、数値を変えていくだけです。
数値については、以下を参考にしてください。
自分で数値をカスタマイズ
- 横軸の名前変える
labelsの中を変更。〇か月の部分です。 - グラフのタイトルを変える
labelの中を変更。PVの部分です。 - グラフの値を変える
dataの中を変更。100とか200とかの場所で、labelsの数とdataの数が一致するようにしましょう。
色を変えたいなら、borderColorが線の色、backgroundColorが接点の色になっていますので、お好みで変更しましょう。
棒グラフのコード
続いて棒グラフのコード。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> <canvas id="myChart" style="padding: 0px 10px 0px 10px;"></canvas> <script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['1か月', '2か月', '3か月', '4か月', '5か月', '6か月'], datasets:[{ label: 'PV', data: [100, 200, 400, 1000, 2000, 5500], borderColor: "rgba(30,255,30,1)", backgroundColor: "rgba(50,255,50,0.8)", } ] } }); </script>
同様に、テキストモードにしてWordPressに貼り付けるだけです。いつも記事を書いている感覚で挿入できるのでいいですね。
maipyon
折れ線グラフ+棒グラフのコード
最後に、複合したグラフのコードを紹介します。
PVと収益のグラフにするときとかに使えそう。
こんな感じの複合グラフができます。
上記のグラフのコードは以下の通り。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> <canvas id="myChart" style="padding: 0px 10px 0px 10px;"></canvas> <script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data : { labels: ['1か月', '2か月', '3か月', '4か月', '5か月', '6か月'], datasets:[{ type: 'line', label: 'PV', data: [100, 200, 400, 1000, 2000, 5500], borderColor: "rgba(30,255,30,1)", backgroundColor: "rgba(50,255,50,0.8)", fill: false, lineTension: 0, }, { type: 'bar', label: '収益', data: [0, 300, 650, 680, 800, 1100], borderColor: "rgba(54,162,255, 1)", backgroundColor: "rgba(54,162,235,0.8)", }, ]} }); </script>
くっつけた感じなので、これを元に数値をいじるだけで簡単に狙い通りのグラフが作れるのではないかと思います。
記事内に複数個グラフを挿入したい場合
記事内に複数個グラフを挿入したい場合には、コードを多少いじる必要があります。
コードをいじる場所は簡単で、myChartの後に数値を付けるだけでOKです。
分かる人向けの説明をすると、「引数の名前をページ内で重複させないようにする」だけです。
分からない人でも、3か所変えるだけで済むので安心してください。
例:1つ目のグラフはmyChart1、二つ目はmyChart2・・・
というように、グラフごとに違う名前を付けていけば大丈夫。
『myChart』と書かれている部分はすべて変更しましょう。
コードの上側の部分に変更すべき箇所が3か所ありますので、そこを変更していただければ全部表示できるようになります。
Chart.jsを使用してWordPressにグラフを挿入するメリット
メリットはいくつかあるのですが、何と言っても「プラグインを使用しなくていい」という点が大きいです。
しかも、記事内にて使用するための宣言や読み込みを行っているので、ページ速度が重くなったとしても、挿入した記事内のみ。
サイト全体への影響はありません。
プラグインだとそうはいきませんし、プラグインの脆弱性があれば危険にさらされる恐れもあるので、プラグインはできるだけ使わないのが良いですね。
プラグインの脆弱性って?
もしプラグインのセキュリティがゆるい場合、プラグイン経由で悪質なユーザーが悪さをする可能性があるという事です。
実際に起きていることなので、できればプラグインは少なめにしたいところ。
WordPressでChart.jsを使ってグラフを入れる方法まとめ
今回は、Chart.jsを使用して記事内にグラフを挿入する方法について説明しました。
クラシックエディタだとテキストモード→ビジュアルモードへの切り替え時にコード内に変なものが自動で挿入される場合があります。
テキストモードの時のカーソルの位置が原因なので、プレビューを確認してグラフがない場合、再度コードを確認し、変なものが混じってないか確認してください。
googleアナリティクスや、googleアドセンスのデータはスクリーンショットなどで載せてはいけないことになっています。
そのため、自作でグラフを作るしかない!といった場合に気軽に使えそうです。
ただ、PVやアドセンス収益の数値をそのまま使うのはGoogleの規約違反。
数値を100の位で四捨五入するなど、多少いじるようにはしましょう。
maipyon
かっこよく、そして分かりやすいグラフを掲載して分かりやすい記事を書いてみてください。

