AngularJSのSelectと$watchを使ってGoogle chartの図のタイプを切り替え

別の記事でWordPress投稿本文にAngularJSのカスタムディレクティブを使ってGoogle chartのグラフを挿入しました。今回は、AngularJSのSelectボックスと$watchメソッドを使ってGoogle chartの図のタイプを切り替えられるようにしました。

1)Selectボックス設定
(HTML)

<select id="chartType" ng-model="chartType" 
        ng-change="selectType(chartType)" 
        ng-options="c.typeName for c in chartTypes">
</select>

(スクリプト)

$scope.chartTypes = [
  {typeName: 'LineChart', typeValue: '1'},
  {typeName: 'BarChart', typeValue: '2'},
  {typeName: 'ColumnChart', typeValue: '3'},
  {typeName: 'PieChart', typeValue: '4'}
];
$scope.chartType = $scope.chartTypes[0];

$scope.selectType = function(type) {
  $scope.chart.type = type.typeValue;
}
chart.type = $scope.chartTypes[0].typeValue;

(上記コードの説明)
①AngularJSスクリプト内でSelectボックスのオプション値を定義します。各種Google chartのタイプを指定します。
 
$scope.chartTypes = [
 {typeName: ‘LineChart’, typeValue: ‘1’},
 {typeName: ‘BarChart’, typeValue: ‘2’},
 {typeName: ‘ColumnChart’, typeValue: ‘3’},
 {typeName: ‘PieChart’, typeValue: ‘4’}
];
 
②HTMLで”ng-options”を使ってselectタグとそれに紐づくoptionタグを生成します。
スクリプト内の”chartTypes”配列からデータを読み出し、optionタグを生成します。
 
<select id=”chartType” ng-model=”chartType”
   ng-change=”selectType(chartType)”
   ng-options=”c.typeName for c in chartTypes”>
</select>
 
③スクリプト内でSelectボックスで初期表示される項目を設定します。
ここでは、”LineChart”を初期値として表示するように指定しています。
 
$scope.chartType = $scope.chartTypes[0]
 
④Selectボックスで選択した値を反映
 
ngChangeディレクティブを使ってユーザーがSelectボックスを選択したらその値をすぐに取得し、図のタイプを変更します。
(HTML)
ng-change=”selectType(chartType)”
 
(スクリプト)
$scope.selectType = function(type) {
 $scope.chart.type = type.typeValue;
}
 
2)$watchメソッドで図の切り替え
 
上記1)④で示したようにユーザーがSelectボックスで選択すると即座にその値が$scope.chart.typeに保存されます。
 
この属性値が変更されたかどうかを$watchメソッドを使って監視し、変更されたらその値を取得し、図のタイプを切り替えます。
 
gChartディレクティブのlink関数を下記のように設定します。
$watchメソッドの引数に’chart’を指定して$scope.chart.typeの値が変更されたかどうか監視しています。

mymodule.directive('gChart3', function() {
  return {
    restrict: 'A',
    link: function($scope, elm, attrs) {
      $scope.$watch('chart', function() {
        var type = $scope.chart.type;
        var chart = '';
        if (type == '1') {
          chart = new google.visualization.LineChart(elm[0]);
        } else if (type == '2') {
     :
        }
        chart.draw($scope.chart.data, $scope.chart.options);
      },true);
    }
  };
});

3)サンプルコード全体
(gglchart3.js)

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

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

var mymodule = angular.module('MyApp', [])
mymodule.controller('MyCtrl3', ['$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.chartTypes = [
        {typeName: 'LineChart', typeValue: '1'},
        {typeName: 'BarChart', typeValue: '2'},
        {typeName: 'ColumnChart', typeValue: '3'},
        {typeName: 'PieChart', typeValue: '4'}
      ];
      $scope.chartType = $scope.chartTypes[0];
      $scope.chart = chart;
    }
  ]);

mymodule.directive('gChart3', function() {
  return {
    restrict: 'A',
    link: function($scope, elm, attrs) {
      $scope.$watch('chart', function() {
        var type = $scope.chart.type;
        var chart = '';
        if (type == '1') {
          chart = new google.visualization.LineChart(elm[0]);
        } else if (type == '2') {
          chart = new google.visualization.BarChart(elm[0]);
        } else if (type == '3') {
          chart = new google.visualization.ColumnChart(elm[0]);
        } else if (type == '4') {
          chart = new google.visualization.PieChart(elm[0]);
        }

        chart.draw($scope.chart.data, $scope.chart.options);
      },true);
    }
  };
});

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

<div ng-controller="MyCtrl3">
  <div g-chart3></div>
  <select id="chartType" ng-model="chartType"  ng-change="selectType(chartType)" ng-options="c.typeName for c in chartTypes">
  </select>
</div>

デモ表示へ

関連記事の目次

コメントを残す

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