カテゴリ一覧から記事を探す

【プラグインなし】WordPressへグラフを挿入する方法を解説!【Chart.js】

WordPressへプラグインなしでグラフを挿入する方法を徹底解説!【Chart.js】

読者の悩み

  • WordPressでグラフを表示させたい
  • 折れ線グラフだけでなくて、棒グラフも表示できたらうれしい
  • なんならどちらも表示させたい。簡単な方法でないですか?

こんな悩みに答える記事になっています。

誰しも

  • ブログ運営報告時にグラフを載せたい。
  • 資産運用の結果をかっこよくのせたい
  • グラフがあればもっと分かりやすく記事が書けそう!

・・・なんて思ったことがあると思います。

今回はプラグインを使用せずにグラフを挿入する方法をお伝えします。

グラフにすることで、表よりも分かりやすく記事が書けますよ。

1.WordPressでグラフを挿入したときの見た目

完成品の見た目は以下の通りです。



折れ線グラフだけでなく、棒グラフも載せることができます。




両者ともに、見たい部分をタップ/ホバーすることで詳細を見ることができます。

表示の最中には動的に動いてくれるので、インパクトも強いですよね。

詳細を見たいという人にもわかりやすいので優秀!
あとカッコイイ。

もちろん線の色なども変更可能です。

変更方法は後々説明していきます。

2.【WordPressにグラフを載せる】Chart.jsの使い方

どのようにグラフを追加するのかを説明します。

コピペして、WordPressの記事編集画面のテキストモードの状態で貼り付けて、数値を変えるだけなので超簡単です。

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に貼り付けるだけです。いつも記事を書いている感覚で挿入できるのでいいですね。

グラフの詳細な数値については棒グラフと変更場所は同じです。

折れ線グラフ+棒グラフのコード

最後に、複合したグラフのコードを紹介します。

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です。

javascriptが書けるという人は分かると思うのですが、「引数の名前をページ内で重複させないようにする」だけです。
分からない人でも、3か所変えるだけで済むので安心してください。

例:1つ目のグラフはmyChart1、二つ目はmyChart2・・・
というように、グラフごとに違う名前を付けていけば大丈夫。

コードの上側の部分に3か所ありますので、そこを変更していただければ全部表示できるようになります。

3.Chart.jsを使用してWordPressにグラフを挿入するメリット

メリットはいくつかあるのですが、何と言っても「プラグインを使用しなくていい」という点が大きいです。

しかも、記事内にて使用するための宣言や読み込みを行っているので、ページ速度が重くなったとしても、挿入した記事内のみで、全体への影響はありません。

プラグインだとそうはいきませんし、プラグインの脆弱性があれば危険にさらされる恐れもあるので、プラグインはできるだけ使わないのが良いですね。

プラグインの脆弱性って?

もしプラグインのセキュリティがゆるい場合、プラグイン経由で悪質なユーザーが悪さをする可能性があるという事です。

実際に起きていることなので、できればプラグインは少なめにしたいところ。

4.WordPressでChart.jsを使ってグラフを入れる方法まとめ

今回は、Chart.jsを使用して記事内にグラフを挿入する方法について説明しました。

テキストモード→ビジュアルモードへの切り替え時にコード内に変なものが自動で挿入される場合があります。

テキストモードの時のカーソルの位置が原因なので、プレビューを確認してグラフがない場合、再度コードを確認し、変なものが混じってないか確認してください。

googleアナリティクスや、googleアドセンスのデータはスクリーンショットなどで載せてはいけないことになっているので、自作でグラフを作るしかない!

といった場合に気軽に使えそうです。

ただ、数値をそのまま使うのはNG。
数値を100の位で四捨五入するなど、多少いじるようにはしましょうね。

ちょっと難しいかもしれませんが、円グラフやレーダーチャートなどもできますので、カッコいいグラフがむちゃくちゃ簡単に描ける!Chart.js 2.0がスゴいの記事を参考にしてやってみるのもいいですね。

かっこよく、そして分かりやすいグラフを掲載して読者を驚かせましょう!