使用Google Charts API和AngularJS创建可视化应用

如今，JavaScript无处不在。 许多有用的JavaScript框架（例如Ember.js，Backbone.js等）正在改变Web的面貌。 由Google开发的最流行的框架是AngularJS。 本文是三部分中的第一部分，将教您如何使用AngularJS构建可视化应用程序。 该示例应用程序将使用Google Charts API可视化数据。 我们将使用Angular的强大two-way binding功能之一来使图表根据数据和用户输入的变化而动态变化。

在开始之前，我们先来看一下如何使用Google Charts API。 就此应用而言，我们将坚持使用一些基本图表，例如折线图，饼图等。

Google图表

以下示例直接来自Google Charts文档，提供了有关如何使用Google Charts API的快速入门。 第一个脚本加载AJAX API。 在第二个脚本中，第一行加载Visualization API和linechart包。 第二行设置了在加载Google Visualization API时运行的回调。 回调函数创建一个数据表，设置一些图表选项，实例化我们的图表，并创建图表。

如果您不熟悉此API，或者需要复习一下，建议阅读Google图表文档。

AngularJS

在开始使用Angular之前，您应该：

• 安装Node.js
• 从GitHub克隆种子项目

在终端上，导航到种子项目，然后输入以下命令：

cd angular-seed
node scripts/web-server.js

您应该看到以下消息输出到控制台：

HTTP Server running at http://localhost:8000/

此时，您可以通过导航到http://localhost:8000/app/index.html来查看演示页面。

Angular使用MVC（模型-视图-控制器）设计模式。 在本教程中，我们将专注于控制器。 目前，将Controller视为处理页面特定部分并使用View呈现数据的逻辑。 一旦开始编写应用程序，我们将更好地了解什么是控制器。

现在，让我们看一下有角种子项目。 这是一个Angular应用程序模板，我们将在其上构建应用程序。 在有角种子项目内部，导航到app/js 。 在那里，我们可以看到控制器，指令，应用程序，过滤器和服务。 这些是我们在创建应用程序时将要玩的东西。

构建应用

用以下代码替换index.html中的代码：

  
  


  
{{name}}
  
  
  
  
  
  
  

控制器

如前所述，控制器包含处理页面特定部分的逻辑。 在前面的代码示例中，请注意以下行：

{{name}}

该div具有ng-controller属性，其值为MyCtrl1 。 MyCtrl1是在app/js/controllers.js文件中找到的控制器功能的名称。 ng-controller属性称为指令 。 Angular指令用于增强HTML，而ng-controller指令用于为页面的特定部分设置控制器。

{{name}}是用于将数据从控制器传递到视图的变量。 现在的问题是，如何在MyCtrl1控制器中访问变量name 。 那就是$scope进入图片的地方。 $scope是一个对象，它充当控制器和视图之间的通信机制。 检查以下修改后的controllers.js代码：

'use strict';

/* Controllers */

angular.module('myApp.controllers', []).
  controller('MyCtrl1', ['$scope',
    function($scope) {
      $scope.name = 'Jay';
    }
])
  .controller('MyCtrl2', [
    function() {

    }
]);

在前面的代码中，我们将$scope作为参数传递，并设置变量name 。 现在，只需使用以下命令重新启动Node.js服务器。

node scripts/web-server.js

现在，将浏览器URL指向http://localhost:8000/app/index.html ，应该会显示名称。

创建图表

现在，让我们绘制一些图表。 首先，在index.html包含Ajax API。

接下来，修改index.html的div ，如下所示。

在controllers.js加载可视化API和linechart包。

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

加载包后，我们需要初始化Angular应用。

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

angular.bootstrap是用于手动启动Angular应用程序的全局API。 只需将Google Chart创建代码复制并粘贴到controller函数中，这就是我们最终得到的结果：

'use strict';

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

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

angular.module('myApp.controllers', []).
  controller('MyCtrl1', ['$scope',
    function($scope) {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2004', 1000, 400],
        ['2005', 1170, 460],
        ['2006', 660, 1120],
        ['2007', 1030, 540]
      ]);
      var options = {
        title: 'Company Performance'
      };
      var chart = new google.visualization.LineChart(document.getElementById('chartdiv'));

      chart.draw(data, options);
    }
  ])
    .controller('MyCtrl2', [
      function() {

      }
  ]);

在运行代码之前，请编辑index.html并从html标记中删除ng-app="myApp" 。 ng-app使用该应用引导元素。 但是，由于我们已经在控制器代码中（使用以下代码行）进行了此操作，因此可以将其从HTML中删除。

angular.bootstrap(document.body, ['myApp']);

重新启动节点服务器并访问http://localhost:8000/app/index.html 。 您应该会看到基于我们的虚拟数据的折线图。

结论

在本部分教程中，我们重点介绍Angular控制器。 在下一篇文章中，我们将重点介绍伪指令和$ scope的使用。 同时，本文的所有代码都可以在GitHub上找到 。

From: https://www.sitepoint.com/creating-visualization-app-using-google-charts-api-angularjs/