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

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

ここでは下記のようにWordPress投稿本文に、”g-chart”という属性を指定してGoogle chartsの図を挿入できるカスタムディレクティブを定義します。
　
１）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の要素に埋め込みます。
　
２）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>

　
デモ表示へ