WordPressの記事ページ (それ以外でも多分OK) に、Google Charts を使って生成したグラフを表示する方法

1. はじめに
2. やりたいこと
3. やり方
4. デモ
5. おわりに

1. はじめに

先月書いた「Web閲覧履歴をもとにした広告配信」についての調査結果という記事では円グラフを載せていますが、これは画像を表示しているのではなく JavaScript の処理によってグラフ（SVGフォーマット）をその場で生成させて表示しています。

グラフ生成処理のために利用している Google Charts というチャートツールの使い方も含め、どうやってこれを実現しているかについて説明します。

※ WordPress 以外のウェブページでもやり方はほとんど同じです。

2. やりたいこと

以下のようなデータを円グラフで表示することが今回の目的です。

以下のように表示したいということです。

カーソルを合わせるとその部分の説明が動的に表示されます。

3. やり方

無料で使えるグラフ生成用JavaScriptライブラリというのは、かなりたくさん存在しているのですが、今回は Google Charts というチャートツールを使っています。

🔗 Charts | Google Developers

(1) Google Charts の JavaScript ファイルを読み込ませる

ヘッダ部に以下を追記して、Google Charts の JavaScript ファイルを読み込ませます。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

header.php に記述してもよいですし、functions.php 内で wp_enqueue_scripts アクションに wp_enqueue_script() 関数をフックしてもよいです。

(2) グラフを表示させたい箇所に `div` タグを記述する

記事内のグラフを表示させたい箇所に div タグを記述します。

id属性に、サイト内で一意になるような文字列をセットします。

<div id="chart_div_XXXXX"></div>

(3) グラフを生成するための JavaScriptコードを記述する

記事のどこか（一番下など）に、以下の JavaScriptコードを記述します。
これが、グラフを生成する処理になります。

<script>
document.addEventListener("DOMContentLoaded", (event) => {
  // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(() => {
    // Create the data table.
    const data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['便利と感じる', 0.107],
      ['便利と感じるが、不快に感じることもある', 0.355],
      ['便利と感じないし、不快に感じることが多い', 0.259],
      ['不快なのでやめてほしい', 0.256],
      ['その他', 0.023]
    ]);
    // Set chart options
    const options = {
      'title':'Web閲覧履歴などをもとにカスタマイズされた広告が配信されていると認識している人の感想',
      'width': '100%',
      'height':300
    };
    // Instantiate and draw our chart, passing in some options.
    const chart = new google.visualization.PieChart(document.getElementById('chart_div_XXXXX'));
    chart.draw(data, options);
  });
});
</script>

data.addRows() の引数部分に、データを記述します。パーセンテージの数値は、全体を1とした割合に変換してセットします。
変数 options に「グラフタイトル(title)」「幅(width)」「高さ(height)」をセットしていますが、このあたりはそのときの状況に合わせて調整します。
基本的には、data.addRows() と options の部分を変更するだけで、いろいろなデータを円グラフで表示することができます。
このコードは、Quick Start | Charts | Google Developers に書いてあるコードをほぼそのまま流用しています。
グラフをカスタマイズする場合は、How to Customize Charts | Charts | Google Developers といったページを読んでいきましょう。

4. デモ

このやり方に従い、ここでも同じ円グラフを表示してみました。

カーソルを重ねると、ただの画像ではないことが分かります。

5. おわりに

ウェブページにグラフに載せたい場合、他のアプリケーションでグラフを作成し、その画像を載せるという方法もあります。
もちろんこれでも良いのですが、今回のように JavaScript を使ってグラフを生成・表示すれば、他のアプリケーションを使う必要もありませんし、ただの画像にとどまらない効果を持たせることも可能です。シンプルなグラフであれば、こちらの方がラクな作業で高度なグラフ表示を実現でき、コストパフォーマンスが高いのではと思います。慣れていないと却って面倒かもしれませんが、1つのアクセントとして見ても面白いのではないでしょうか。