google_chart_icatch

【WordPress】Google ChartのAPIを使って動的で美しいグラフを表示させる方法

【WordPress】Google ChartのAPIを使って美しいグラフを表示させる方法

こんにちは。サラリーマンで育児に奮闘している「おったん」です。

この記事では、Google ChartのAPIを使ってWordPress(ワードプレス)上で以下のような美しいグラフを表示させる方法をご紹介します。

WordPressで動的グラフやレスポンシブデザインのチャートをきれいに書きたい方や、WordPressでどのようにGoogle ChartのAPIを使うのか知りたい方に役立てばと思います。

先日、ブログ運営1ヶ月目の運営報告の記事を登録しましたが、その際にグラフを書きたいなと思ったときにGoogle Chartを見つけました。自分の備忘録のためにもGoogle Chartの使い方を記事にまとめておこうと思います。

あわせて読みたい関連記事

【ブログ運営報告】初心者雑記ブログの1ヶ月目のPV(アクセス数)・収益などのまとめ こんにちは。サラリーマンで育児に奮闘している「おったん」です。 この記事では、ブログを開設して1ヶ月経ったので、当ブログへ訪問したユーザ数、PV数や[…]

1month_result

Goole Chartとは

Google ChartDeveloper’s Guide – Google Chart Tools)はGoogleが提供しているグラフやチャートをWeb上に描画するためのオンラインツールです。APIのURLにパラメータを指定するだけで簡単にグラフを生成しウェブサイトに簡単に掲載することができ、手軽に使うことができます。

グラフやチャートをカスタマイズするにはJavaScriptの基本的な知識は必要ですが、サンプルのコードが用意されているので、基本的なグラフやチャートであれば数字や項目名の変更をするだけで任意のブラフを作成することができます。

WordPress上でGoogle Chartを表示させるための準備

①Code Embedのインストール

WordPressのプラグインであるCode Embedをインストールしましょう。WordPressの管理画面のプラグインからインストールを行います。インストール後は、Code Embedの設定は何もせず、デフォルトのままで問題ないです。

②カスタムフィールドの表示

グラフやチャートを描画したい投稿の編集画面で、カスタムフィールドを設定できるようにカスタムフィールドを表示させます。カスタムフィールドを表示させるためには、投稿の編集画面の左上にある「表示オプション」をクリックします。

Google_chart01

表示オプションの選択しが表示されるので、「カスタムフィールド」のチェックボックスにチェックマークを入れます。

これで投稿の編集画面の下の方にカスタムフィールドの画面が表示されるようになります。

これでWordPress上でGoogle Chartの埋め込みを行う準備は完了です。

Google_chart02

man_smile4おったん
これで準備は完了です!

Goole Chartの埋め込み手順

①Google Chartのグラフを探す

最初にWordPress上で表示させたいグラフやチャートをGoogle Chartギャラリーで探します。

ここでは、例としてCombo ChartおよびPie Chart(Exploding a Slice)をWordPressに表示する手順を説明します。

Google Chartギャラリー上のサンプルはグラフとともにコードが示されています。WordPressへ埋め込む際は、<head>から</head>までの間の<script>から</script>までのコードをコピーして使います。

例として使用する、Combo ChartおよびPie Chart(Exploding a Slice)<script>から</script>までのコードは以下になります。(*グラフの名前を日本語に変更しています。)

Combo Chartのサンプルコード

Pie Chartのサンプルコード

②Goole Chartのコードの埋め込みを行う

まずGoogle Chartのサンプルのコード内の<script>から</script>までのコードをカスタムフィールドへ追加します。

カスタムフィールドの名前は「CODEchart」を選択します。「」のテキストボックスにコピーしたコードを貼り付け「カスタムフィールドへ追加」のボタンを押します。

Google_chart03

ここでは、例として2つのグラフを同一の記事に描画する例を示します。同様の手順でもう一つのグラフのコードをカスタムフィールドへ入力します。

カスタムフィールドの名前が同じ名前だと区別がつかないので、ここでは「CODEchart1」、「CODEchart2」と変更しています。

次に「」のテキストボックス内に登録されたgetElementById部分の要素である「piechart」、「chart_div」を投稿の内容に埋め込みます。

Google_chart04

投稿の編集画面で入力を「ビジュアル」から「テキスト」へ切り替え、以下の画像のようにコードを埋め込みます。

ここで、カスタムフィールドの名前は「 {{ 」と「 }} 」で囲い、「<div id=」の部分のカスタムフィールドの「」に入力したgetElementById部分の要素の「piechart」と「chart_div」を入力します。

また、「style=」の部分の「width」はレスポンシブデザインにするため100%とし、高さは「height」で指定します。

Google_chart06

入力が完了したら投稿のプレビューからグラフが表示されていることを確認します。

以下のようなグラフが表示されていればグラフの埋め込みは成功です。

もしうまく表示されていなければカスタムフィールドへ入力した名前や要素が埋め込みと対応しているか見直してみてください。

グラフの内容については、カスタムフィールドの「」部分に入力したコード見てグラフに対応する数字や文字を変更すると任意のグラフが作成できます。

おったん
きれいなグラフですね
クリックやタップをしてみると数字が表示されます

まとめ

この記事では、Google ChartのAPIを使ってWordPressで美しいグラフやチャートを表示させる方法をご紹介しました。

動的グラフやレスポンシブデザインのチャートをきれいに書きたい方や、WordPressでどのようにGoogle ChartのAPIを使うのか知りたい方に役立てば幸いです。

この記事で使用しているシンタックスハイライト(コードをきれいに表示させる方法)については以下の記事にまとめていますので、参考にしてみてください。

あわせて読みたい関連記事

【WordPress】プラグインやPrism.jsでシンタックスハイライトが動かないときは「Gist」がおすすめ こんにちは。サラリーマンで育児に奮闘しているおったんです。 この記事では、「Gist」を使ったシンタックスハイライトの[…]

git-hub_gist_icatch
google_chart_icatch
最新情報をチェックしよう!