Статьи

Создание приложения визуализации с использованием Google Charts API и AngularJS

Август 5, 2018

В настоящее время JavaScript есть везде. Ряд полезных JavaScript-фреймворков, таких как Ember.js, Backbone.js и т. Д., Изменяют облик Интернета. Среди наиболее популярных фреймворков — AngularJS, разработанный Google. Эта статья, первая из трех, научит вас создавать приложение визуализации с использованием AngularJS. Пример приложения будет визуализировать данные с помощью Google Charts API. Мы будем использовать одну из замечательных возможностей Angular для two-way binding

Прежде чем начать, давайте сначала посмотрим, как использовать Google Charts API. Для целей этого приложения мы будем придерживаться некоторых основных диаграмм, таких как линейные диаграммы, круговые диаграммы и т. Д.

Google Charts

Прямо из документации Google Charts, следующий пример дает краткое представление о том, как использовать Google Charts API. Первый скрипт загружает AJAX API. Во втором скрипте первая строка загружает API визуализации и пакет линейной диаграммы. Вторая строка устанавливает обратный вызов для запуска при загрузке API визуализации Google. Функция обратного вызова создает таблицу данных, устанавливает несколько параметров диаграммы, создает экземпляр нашей диаграммы и создает диаграмму. 

 <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 (Model-View-Controller). В этом уроке мы сосредоточимся на контроллерах. В настоящее время считают контроллером логику, которая обрабатывает определенную часть страницы и отображает данные с использованием представления. Мы получим более полное представление о том, что такое контроллеры, как только начнем писать приложение.

Теперь давайте посмотрим на проект угловых семян. Это шаблон приложения 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>

Этот divng-controllerMyCtrl1 MyCtrl1app/js/controllers.js Атрибут ng-controllerдирективой . Угловые директивы используются для улучшения HTML, а директива ng-controller

{{name}} Теперь вопрос в том, как нам получить доступ к nameMyCtrl1 Вот где $scope $scope Изучите измененный код controllers.js 

 'use strict';

/* Controllers */

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

    }
]);

В предыдущем коде мы передаем $scopename Теперь просто перезапустите сервер Node.js, используя следующую команду.

node scripts/web-server.js

Теперь, указав URL браузера на http://localhost:8000/app/index.html

Создание диаграмм

Теперь давайте нарисуем некоторые диаграммы. Сначала включите Ajax API в index.html 

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

Затем измените divindex.html 

 <div ng-controller="MyCtrl1" id="chartdiv"></div>

В controllers.js 

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

Как только пакет загружен, нам нужно инициализировать наше приложение Angular. 

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

angular.bootstrap Просто скопируйте и вставьте код создания Google Chart в функцию контроллера, и вот что у нас получилось: 

 '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.htmlng-app="myApp"html ng-app Однако, поскольку мы уже делаем это в коде нашего контроллера (со следующей строкой кода), мы можем удалить его из HTML. 

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

Перезапустите Node-сервер и посетите http://localhost:8000/app/index.html Вы должны увидеть график, основанный на наших фиктивных данных.

Вывод

В этой части руководства мы сосредоточились на контроллерах Angular. В следующей статье мы сосредоточимся на использовании директив и $ scope. Тем временем весь код из этой статьи доступен на GitHub .

31
Share: