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

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

関連記事

Web

ウェブ上の「名前を付けて画像を保存」ができない画像をダウンロードする方法

目次1. 「名前を付けて画像を保存」ができない画像2. この手の画像を保存する方法3. おわりに 1. 「名前を付けて画像を保存」ができない画像 ウェブページに載っている画像をダウンロードしたい場合、 …

Chrome

Google Chrome 68 で、HTTPS非対応のマークが変わりました

目次1. Chrome 68 がリリース2. 以前のマーク3. Chrome 68 以降のマーク4. ついでに、https にしてアクセスしてみる5. おわりに 1. Chrome 68 がリリース …

Web

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

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

no image

ドメインに関して気を付けること

目次TLS証明書ドメインの乗っ取り1. TLS証明書が発行されてしまうとまずい2. メールアドレスが利用されてしまう TLS証明書 証明書の期限を短くする。 ドメインの乗っ取り 1. TLS証明書が発 …

web development

HTTPレスポンスヘッダ COEP, COOP, CORP, CORS についてのメモ

HTTP Response Header である COEP, COOP, CORP, CORS についてのメモです。