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

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

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

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

そんな方のために、今回はプラグインを使用せずにコピペだけでグラフを挿入する方法をお伝えします。
Chart.jsというものを使用します。

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

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

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



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




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

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

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

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

2.Chart.jsの使い方

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

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

折れ線グラフのコード

まずは折れ線グラフのコードから。

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

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

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

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

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

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

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

4.まとめ

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

テキストモード→ビジュアルモードへの切り替え時にコード内に変なものが自動で挿入される場合があります。(テキストモードの時のカーソルの位置が原因)なので、プレビューを確認してグラフがない場合、再度コードを確認し、変なものが混じってないか確認してください。

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

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

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

上記の記事で今までにやってきたデザインについてまとめています。
もしよければそちらもどうぞ。