JavaScriptとしてAngularJSを使い、Google ChartのグラフをWordPress投稿本文に作成する方法についてまとめました。

AngularJSをheader.phpファイル内でインクルードして利用できるようにする手順は下記参照。
ブートストラップ3を使って作成したナビゲーションメニューをAngularJSを使う形に変更する方法
　
１）Google Chartsのサンプルコードを作成
　
・オンラインマニュアルの下記コードを使用し、AngularJSを使ってスクリプトを記述します。
https://developers.google.com/chart/interactive/docs/quick_start
　
・ここでは、上記参照記事の手順でAngularJSのモジュール名が’MyApp’として設定されていることを前提としています。
　
（gglchart1.js）

google.load('visualization', '1', {
  packages: ['corechart']
});

google.setOnLoadCallback(function() {
  angular.bootstrap(document.body, ['MyApp']);
});

angular.module('MyApp', []).
  controller('MyCtrl1', ['$scope',
    function($scope) {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);
      var options = {'title':'How Much Pizza I Ate Last Night',
                 'width':400,
                 'height':300};
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  ]);

　
２）上記ファイルをサーバーにアップロード
　
３）投稿本文に下記を記述
　
<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>
<script type=’text/javascript’ src=’http://www.example.com/wp-content/themes/ang/js/gglchart1.js’></script>

<div ng-controller=”MyCtrl1″ id=”chart_div”></div>
　
４）動作確認
　
特に問題なく表示出来ました。
　
デモ表示へ

関連記事の目次