Création d'une application de visualisation à l'aide de l'API Google Charts et AngularJS

Points de base

• AngularJS, le framework JavaScript populaire de Google, peut être utilisé pour créer des applications visuelles dynamiques qui tirent parti de l'API Google Charts. La fonction de liaison bidirectionnelle d'Angular permet aux graphiques de changer dynamiquement en fonction des données et de l'entrée utilisateur.
• La création d'une application visuelle avec AngularJS implique plusieurs étapes, telles que la configuration angulaire, la création d'une application et la création d'un graphique. Ce processus nécessite d'écrire du code dans HTML et JavaScript, en utilisant le modèle de conception MVC d'Angular et en intégrant l'API Google Charts pour la visualisation.
• L'API Google Charts offre une variété d'options de personnalisation des graphiques, y compris la modification des couleurs, des polices et des lignes de grille. Il fournit également des fonctionnalités interactives telles que le déclenchement des événements lorsqu'un utilisateur sélectionne un élément sur un graphique. Pour utiliser Google Charts avec AngularJS, les développeurs peuvent utiliser le package de charts angulaires.

JavaScript est partout ces jours-ci. De nombreux frameworks JavaScript utiles, tels que Ember.js, Backbone.js, etc., modifient le visage du Web. L'un des cadres les plus populaires est AngularJS développé par Google. Cet article est le premier d'une série de trois articles qui vous apprendront à créer des applications visuelles à l'aide d'AngularJS. L'exemple d'application utilisera l'API Google Charts pour visualiser les données. Nous utiliserons l'une des incroyables fonctionnalités de liaison bidirectionnelles d'Angular pour que nos graphiques changent dynamiquement en fonction des données et de l'entrée utilisateur. Avant de commencer, comprenons d'abord comment utiliser l'API Google Charts. Pour cette application, nous resterons avec certains graphiques de base tels que les graphiques de ligne, les graphiques circulaires, etc.

Google Charts

À partir de la documentation Google Charts, les exemples suivants examinent rapidement comment utiliser l'API Google Charts. Le premier script charge l'API AJAX. Dans le deuxième script, la première ligne charge l'API de visualisation et les packages LineChart. La deuxième ligne définit une fonction de rappel qui s'exécute lorsque l'API de visualisation Google se charge. La fonction de rappel crée une table de données, configure certaines options de graphique, instancie notre graphique et crée le graphique.

<🎜>
<🎜>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Si vous n'êtes pas familier avec cette API ou que vous avez besoin d'une revue, je vous recommande de lire la documentation Google Charts.

angularjs

Avant de commencer à utiliser Angular, vous devez:

• Installez Node.js
• Clone Seed Project de GitHub

Naviguer du terminal vers le projet de semences et entrez la commande suivante:

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

Vous devriez voir la sortie du message suivant à la console:

<code>HTTP Server running at http://localhost:8000/</code>

À ce stade, vous pouvez afficher la page de démonstration en naviguant vers http: // localhost: 8000 / app / index.html.

Angular utilise le mode de conception MVC (modèle-View-Controller). Dans ce tutoriel, nous nous concentrerons sur les contrôleurs. Actuellement, le contrôleur peut être considéré comme une logique qui traite des parties spécifiques de la page et rend les données à l'aide de vues. Une fois que nous commencerons à rédiger l'application, nous aurons une meilleure compréhension de ce qu'est le contrôleur. Maintenant, jetons un coup d'œil au projet Angular Seed. Il s'agit d'un modèle d'application angulaire sur lequel nous créerons notre application. Dans le projet Angular Seed, accédez à App / JS. Là, nous pouvons voir des contrôleurs, des instructions, des applications, des filtres et des services. C'est ce que nous utiliserons lorsque nous créerons l'application.

Créez l'application

Remplacez le code dans index.html par le code suivant:

<🎜>
<🎜>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Contrôleur

Comme mentionné précédemment, le contrôleur contient une logique pour traiter des parties spécifiques de la page. Dans l'exemple de code précédent, veuillez noter la ligne suivante:

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

Cette div a un attribut Ng-contrôleur avec une valeur de myctrl1. MYCTRL1 est le nom de la fonction de contrôleur trouvé dans le fichier app / js / contrôlers.js. L'attribut Ng-contrôleur est appelé la directive . La directive angulaire est utilisée pour améliorer HTML, et la directive NG-contrôleur est utilisée pour définir des contrôleurs pour des parties spécifiques d'une page. {{name}} est une variable utilisée pour transmettre les données du contrôleur à la vue. Maintenant, la question est de savoir comment accéder au nom de la variable dans le contrôleur MYCTRL1. C'est là que $ scope entre en jeu. $ Scope est un objet qui agit comme un mécanisme de communication entre le contrôleur et la vue. Vérifiez le code Controllers.js modifié ci-dessous:

<code>HTTP Server running at http://localhost:8000/</code>

Dans le code précédent, nous passions $ Scope comme paramètre et définissons le nom de la variable. Maintenant, redémarrez simplement le serveur Node.js avec la commande suivante.

<!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>
  <🎜>
  <🎜>
  <🎜>
  <🎜>
  <🎜>
  <🎜>
  <🎜>
</body>
</html>

Maintenant, pointez l'URL du navigateur vers http: // localhost: 8000 / app / index.html et le nom doit être affiché.

Créer un graphique

Maintenant, dessinons quelques graphiques. Tout d'abord, incluez l'API AJAX dans index.html.

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

Ensuite, modifiez le div dans index.html comme indiqué ci-dessous.

'use strict';

/* Controllers */

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

    }
  ]);

Chargez l'API de visualisation et le package LINECHART dans Controllers.js.

node scripts/web-server.js

Après avoir chargé le package, nous devons initialiser notre application angulaire.

<🎜>

angular.bootstrap est une API globale pour démarrer manuellement les applications angulaires. Copiez et collez le code de création Google Chart dans la fonction du contrôleur, et c'est notre résultat final:

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

Modifier index.html et supprimer ng-app = "myApp" de la balise HTML avant d'exécuter le code. NG-App utilise des éléments de démarrage d'application. Cependant, comme nous le faisons déjà dans le code du contrôleur (en utilisant la ligne de code suivante), nous pouvons le supprimer du HTML.

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

Redémarrez le serveur de nœuds et visitez http: // localhost: 8000 / app / index.html. Vous devriez voir un graphique de ligne basé sur nos données virtuelles.

Conclusion

Dans cette partie de ce tutoriel, nous nous concentrons sur les contrôleurs angulaires. Dans le prochain article, nous nous concentrerons sur l'utilisation des directives et de $ Scope. Dans le même temps, tout le code de cet article peut être trouvé sur GitHub.

FAQ (FAQ) pour créer des applications visuelles à l'aide de l'API Google Charts et AngularJS

Comment personnaliser l'apparence des graphiques Google?

L'API Google Charts offre une large gamme d'options de personnalisation qui vous permettent de modifier l'apparence d'un graphique. Vous pouvez changer les couleurs, les polices, les lignes de grille et plus encore. Pour personnaliser le graphique, vous devez modifier l'objet Options dans la méthode Draw () du graphique. Par exemple, pour modifier le titre d'un graphique, vous pouvez utiliser le code suivant:

<🎜>
<🎜>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

N'oubliez pas que les objets d'options peuvent contenir de nombreuses propriétés qui vous permettent de personnaliser votre graphique largement.

Comment ajouter l'interactivité aux graphiques Google?

L'API Google Charts fournit plusieurs façons d'ajouter l'interactivité aux graphiques. L'une des méthodes les plus courantes consiste à utiliser l'événement "Sélectionner", qui est déclenché lorsque l'utilisateur sélectionne un élément du graphique. Vous pouvez ajouter un écouteur d'événements au graphique qui écoute l'événement "Select" et effectue une action lorsqu'il est déclenché. Voici un exemple:

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

Dans cet exemple, lorsque l'utilisateur sélectionne un élément du graphique, une boîte d'alerte apparaît affichant la valeur de l'élément sélectionné.

Comment utiliser Google Charts avec AngularJS?

Pour utiliser les graphiques Google avec AngularJS, vous pouvez utiliser le package de charts angulaires. Ce package fournit un ensemble de directives AngularJS qui vous permettent d'intégrer facilement les graphiques Google dans votre application AngularJS. Pour installer le package, vous pouvez utiliser la commande suivante:

<code>HTTP Server running at http://localhost:8000/</code>

Après l'installation du package, vous pouvez utiliser les instructions fournies par le package pour créer et personnaliser les graphiques.

Comment connecter plusieurs dataTables dans Google Charts?

Vous pouvez utiliser la méthode Google.Visualization.data.join () pour connecter plusieurs données de données dans Google Charts. Cette méthode prend trois dataTables comme paramètres: le premier DataTable, le deuxième DataTable et la colonne de clé de chaque DataTable. Cette méthode renvoie une nouvelle DataTable contenant des lignes en deux données dont les valeurs de colonne de clé correspondent. Voici un exemple:

<!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>
  <🎜>
  <🎜>
  <🎜>
  <🎜>
  <🎜>
  <🎜>
  <🎜>
</body>
</html>

Dans cet exemple, DataTable1 et DataTable2 sont connectés sur la première colonne de chaque DataTable.

Quels types de graphiques puis-je créer en utilisant des graphiques Google?

L'API Google Charts prend en charge divers types de graphiques, y compris les graphiques de ligne, les graphiques à barres, les graphiques à secteurs, les graphiques de dispersion, les graphiques de zone, etc. Chaque type de graphique est représenté par une classe spécifique de l'API, et vous pouvez créer un graphique en créant des instances de la classe correspondante. Par exemple, pour créer un tableau de ligne, vous pouvez utiliser le code suivant:

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

Dans cet exemple, un nouveau tableau de ligne est créé et affiché dans un élément HTML avec ID "Chart_div".

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!