VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで

Google ChartとAngularJSカスタムディレクティブを使ってWordPress投稿にグラフ作成

別の記事でAngularJSを使ってGoogle ChartのグラフをWordPress投稿本文に作成する方法についてまとめました。今回は、AngularJSのカスタムディレクティブを使う形に修整してみました。

ここでは下記のようにWordPress投稿本文に、”g-chart”という属性を指定してGoogle chartsの図を挿入できるカスタムディレクティブを定義します。
 
1)AngularJSスクリプトでカスタムディレクティブを定義
 
‘gChart’という名前のカスタムディレクティブを次のように定義します。

  .directive('gChart', function() {
  return {
    restrict: 'A',
    link: function($scope, elm, attrs) {
      var chart = new google.visualization.PieChart(elm[0]);
      chart.draw($scope.chart.data, $scope.chart.options);
    }
  };

・restrictでは、要素名(E)やクラス(C)も指定できますが、今回は属性として使用するので’A’を指定します。
 
・linkでこのカスタムディレクティブの振る舞いを定義します。
 
引数は下記のように利用します。
$scope:Google chartsのデータ、オプション
elm:このカスタムディレクティブの要素。ここではdiv
 
関数では、$scope内に設定されたGoogle chartsのデータとオプションを使って図を描画し、その図をelmの要素に埋め込みます。
 
2)Google chartのデータとオプションを$scopeに設定
 
$scopeにGoogle chartsのデータとオプションを指定します。この$scopeがカスタムディレクティブのlink関数に渡されて図の描画、挿入が行われます。
 

var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
  :
var options = {'title':'How Much Pizza I Ate Last Night',
           'width':400,
           'height':300};
var chart = {};
chart.data = data;
chart.options = options;
$scope.chart = chart;

 
●サンプルコード全体
 
(gglchart2.js)

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

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

var mymodule=angular.module('MyApp', [])

mymodule.controller('MyCtrl2', ['$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 = {};
    chart.data = data;
    chart.options = options;
    $scope.chart = chart;
  }
]);

mymodule.directive('gChart', function() {
  return {
    restrict: 'A',
    link: function($scope, elm, attrs) {
    var chart = new google.visualization.PieChart(elm[0]);
rt_div2'));
      chart.draw($scope.chart.data, $scope.chart.options);
    }
  };
});

(WordPress投稿本文)

<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/gglchart2.js'></script>

<div ng-controller="MyCtrl2" g-chart></div>

 
デモ表示へ

モバイルバージョンを終了