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

読者の悩み

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>

くっつけた感じなので、これを元に数値をいじるだけで簡単に狙い通りのグラフが作れるのではないかと思います。