使用Google Charts API和AngularJS创建可视化应用程序–第3部分

最新推荐文章于 2022-08-19 11:42:00 发布

dingshi7798

最新推荐文章于 2022-08-19 11:42:00 发布

阅读量167

点赞数

文章标签： javascript ViewUI

在本系列的第一部分和第二部分中，我们重点介绍AngularJS控制器和指令。在这一部分中，我们将重点介绍AngularJS的双向数据绑定功能。

AngularJS中的数据绑定

Angular的数据绑定允许对模型的更改自动反映在视图中，反之亦然。 AngularJS数据绑定的详细说明可以在这里找到。

我们将在可视化应用程序中添加一些功能。首先，我们将添加一个下拉列表，从中可以选择图的类型。让我们在下拉列表中添加一些图表。打开index.html并添加一个select元素，如下所示：

<select id="chartType"></select>

如果需要，我们可以仅在HTML中定义下拉菜单的选项，但让我们以Angular的方式进行操作。打开controllers.js ，然后定义选项，如下所示。

$scope.chartTypes = [
  {typeName: 'PieChart', typeValue: 'PieChart'},
  {typeName: 'BarChart', typeValue: 'BarChart'},
  {typeName: 'ScatterChart', typeValue: 'ScatterChart'},
  {typeName: 'LineChart', typeValue: 'LineChart'}
];
$scope.chartType = $scope.chartTypes[0];

现在， controllers.js看起来像这样：

'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 = {};

    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;
  }])
  .controller('MyCtrl2', [function() {
  }]);

现在，我们需要将chartTypes绑定到下拉列表。在AngularJS中，我们可以使用ngOptions将选项绑定到下拉列表。我们还需要将chartType绑定到下拉列表中的选定值，为此，我们使用ngModel 。因此，将名为ng-options和ng-model属性添加到下拉列表中，如下所示。

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

ng-options遍历chartTypes的值，并将每个typeName绑定到下拉列表。在运行节点服务器之前，我们需要修改ng-controller值，使其附加到body元素。生成的index.html文件如下所示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My AngularJS App</title>
    <link rel="stylesheet" href="css/app.css" />
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  </head>
  <body ng-controller="MyCtrl1">
    <div g-chart></div>
    <select id="chartType" ng-model="chartType" ng-options="c.typeName for c in chartTypes">
    </select>
    <div>Angular seed app: v<span app-version></span></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>

接下来，使用以下命令启动节点服务器。

node scripts/web-server.js

通过导航到http://localhost:8000/app/index.html您应该看到预填充的下拉列表。

更改图表类型

我们将基于下拉列表中的部分使用ngChange渲染图表。在controllers.js内部定义了另一个$scope变量，如下所示。

$scope.selectType = function(type) {
  $scope.chart.type = type.typeValue;
}

我们还想设置默认的图表类型：

chart.type = $scope.chartTypes[0].typeValue;

将ng-change添加到select元素后，它应如下所示：

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

更改图表类型将导致$scope.chart.type变量。应该注意此更改，以便图表相应地更改。为此，我们有一些东西叫做$scope.$watch ，该款腕表在改变$scope 。在directives.js ，将link回调包装在$scope.$watch ，如下所示。

link: function($scope, elm, attrs) {
  $scope.$watch('chart', function() {
    var chart = new google.visualization.LineChart(elm[0]);

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

此更改将导致对$scope.chart每次更改都触发回调函数。在$scope.$watch回调函数中，我们需要检查$scope.chart.type并相应地创建一个图表对象。修改gChart指令在directives.js ，如下图所示。

.directive('gChart',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);
    }
  };
});

现在，当您从下拉列表中选择其他图表类型时，该图表将被更新。

结论

在本教程中，我们实现了一个下拉列表，并使用Angular的双向数据绑定对其进行了绑定。在我们的下一个教程中，我们将重点介绍添加更多功能并引导应用程序以使其外观良好。同时，该代码可在GitHub上找到，而实时演示则在Heroku上托管。

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

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Google Charts API和AngularJS创建可视化应用程序–第3部分

在第一和第二本系列的部分，我们专注于AngularJS控制器和指令。在这一部分，我们将专注于双向数据绑定AngularJS的功能。数据AngularJS绑定角度的数据绑定允许改变一个模型来自动地反映在视图，反之亦然。 AngularJS数据的详细说明结合可以发现在这里。我们将增加一些功能，我们的可视化应用程序。首先，我们将添加一个下拉在这里我们可以选择的图表类型。让我们在下拉...
复制链接

扫一扫