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

最新推荐文章于 2024-05-13 10:01:05 发布

dingshi7798

最新推荐文章于 2024-05-13 10:01:05 发布

阅读量258

点赞数

文章标签： python vue javascript java html ViewUI

原文链接：https://www.sitepoint.com/creating-visualization-app-using-google-charts-api-angularjs/

版权

google charts

如今，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时运行的回调。回调函数创建一个数据表，设置一些图表选项，实例化我们的图表并创建图表。

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages:['corechart']});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        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('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

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

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中的代码：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
</head>
<body>
  <div ng-controller="MyCtrl1">{{name}}</div>
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>

控制器

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

<div ng-controller="MyCtrl1">{{name}}</div>

该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 ，应该会显示名称。

创建图表

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

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

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

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

<div ng-controller="MyCtrl1" id="chartdiv"></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上获得。

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

google charts

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
google charts_使用Google Charts API和AngularJS创建可视化应用

google charts 如今，JavaScript无处不在。许多有用JavaScript框架（例如Ember.js，Backbone.js等）正在改变Web的面貌。由Google开发的最流行的框架是AngularJS。本文是三篇文章的第一篇，将教您如何使用AngularJS构建可视化应用程序。该示例应用程序将使用Google Charts API可视化数据。我们将使用Angular的...
复制链接

扫一扫