Web

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

投稿日:2019年1月7日 更新日:

1. はじめに

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

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

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

2. やりたいこと

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

元となるデータの表
元となるデータの表

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

先程のデータを円グラフで表示したところ
先程のデータを円グラフで表示したところ

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

カーソルを重ねた時の効果
カーソルを重ねた時の効果

3. やり方

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

(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つのアクセントとして見ても面白いのではないでしょうか。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

SQLite

PHP から SQLite を使う手順

PHP から SQLite を使う手順について説明します。

Web Security

SSLで使用する証明書運用の不便さ

上のどちらも、SSLの証明書が期限を過ぎてしまったことが原因で起きた問題のようです。 前者は詳しく見ていないので分かりませんが、後者はサーバー証明書ではなくデバイス側に保存されているクライアント証明書 …

HTML

HTMLの雛形 (CSS, JavaScriptも)

コピーして使えます。 目次HTML全体パターン1全体パターン2 CSSnormalizeNormalize.css中央寄せのページ幅を指定する方法Flexbox を使う方法タイトル部分とフッター:その …

プライバシー

ウェブブラウザのサードパーティ・クッキーを無効にする方法

目次1. サードパーティ・クッキーとは?2. サードパーティ・クッキーを無効にする手順Chrome の場合Firefox の場合Microsoft Edge の場合Internet Explorer …

Web

Webページ中の特定の文字列をURLで指定する(Text Fragments)

Webページ中の特定の文字列をURLで指定する Text Fragments について説明します。