用Angular.js和Google Chart Tools绘制图表1（饼图）

安装〜运行测试

确认npm安装

npm -v

如果已经安装了npm，则会显示npm的版本。
如果没有安装npm，请参考这里进行安装。

2. 安装 LiveReload

请从以下网站将LiveReload安装到Chrome浏览器中：
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

3. 安装compass。

gem install compass

安装yo、grunt-cli、bower。

npm install -g yo grunt-cli bower

5. 安装生成器网页应用程序

npm install -g generator-angular

移動到作业目录，创建一个 Angular 项目。

yo angular アプリケーション名 --minsafe

使用”minsafe”参数时，即使对代码进行了最小化处理，也不会导致错误产生。

安装适用于Angular.js的GoogleChartTools。

bower install angular-google-chart --save

8.确认动作

当执行以下命令时，在浏览器上显示以下页面即表示安装成功。

grunt serve

插入图表

修正 main.html

打开app/views/main.html文件，删除除了

和

以外的

和

，并且用适用于GoogleChart的标签进行替代。

<div class="header">
  <ul class="nav nav-pills pull-right">
    <li class="active"><a ng-href="#">Home</a></li>
    <li><a ng-href="#">About</a></li>
    <li><a ng-href="#">Contact</a></li>
  </ul>
  <h3 class="text-muted">angular chart</h3>
</div>


<!-- Google Chart用のタグを記述 -->
<div google-chart chart="testchart">


<div class="footer">
  <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
</div>

2. 修复 app.js

打开app/scripts/app.js文件，向module()函数的第二个参数数组中添加’googlechart’。

'use strict';
angular
  .module('chartApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',


    'googlechart'   // <=追加


  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

3. 主要.js进行改正。

打开app/scripts/controllers/main.js，并写入以下代码。

'use strict';
angular.module('chartApp')
  .controller('MainCtrl', function ($scope) {
    $scope.testchart = createChart();
     function createChart() {
          var chart = {};
          chart.type = "PieChart";
          chart.data = [
               ['title', 'val'],
               ['パターンA', 55],
               ['パターンB', 45]
          ];
          return chart;
     }
  });

链接

谷歌图表工具AngularJS指令

bouil/angular-google-chart 是一个GitHub仓库。

Plunker（柱状图）
链接：http://plnkr.co/edit/3RJ2HS?p=preview

Plunker（饼图）
http://plnkr.co/edit/E4iPtQ?p=preview