使用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中的代码:




  
  My AngularJS App


  
{{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.htmldiv ,如下所示。

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/

你可能感兴趣的:(使用Google Charts API和AngularJS创建可视化应用)