Google ChartとAngularJSを使ってWordPress投稿にグラフ作成

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

AngularJSをheader.phpファイル内でインクルードして利用できるようにする手順は下記参照。
ブートストラップ3を使って作成したナビゲーションメニューをAngularJSを使う形に変更する方法
 
1)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);
    }
  ]);

 
2)上記ファイルをサーバーにアップロード
 
3)投稿本文に下記を記述
 
<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>
 
4)動作確認
 
特に問題なく表示出来ました。
 
デモ表示へ

関連記事の目次

コメントを残す

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