Erstellen einer Visualisierungs -App mithilfe der Google -Diagramme -API und AngularJS

Kernpunkte

• AngularJS, das beliebte JavaScript -Framework von Google, kann verwendet werden, um dynamische visuelle Anwendungen zu erstellen, die die Google -Diagramm -API nutzen. Mit der Zwei-Wege-Bindungsfunktion von Angular können Diagramme basierend auf Daten- und Benutzereingaben dynamisch ändern.
• Erstellen einer visuellen Anwendung mit AngularJS beinhaltet mehrere Schritte, z. B. das Einrichten von Angular, das Erstellen einer Anwendung und das Erstellen eines Diagramms. Dieser Prozess erfordert das Schreiben von Code in HTML und JavaScript, unter Verwendung des MVC -Designmusters von Angular und der Integration der Google -Diagramm -API zur Visualisierung.
• Die Google -Diagramm -API bietet eine Vielzahl von Optionen für die Anpassung der Diagramme, einschließlich Ändern von Farben, Schriftarten und Gitterlinien. Es bietet auch interaktive Funktionen wie Auslöser von Ereignissen, wenn ein Benutzer ein Element in einem Diagramm auswählt. Um Google-Diagramme mit AngularJS zu verwenden, können Entwickler das Paket für Angular-Google-Charts verwenden.

JavaScript ist heutzutage überall. Viele nützliche JavaScript -Frameworks wie Ember.js, Backbone.js usw. verändern das Gesicht des Webs. Eines der beliebtesten Frameworks ist AngularJs, die von Google entwickelt wurden. Dieser Artikel ist der erste in einer Reihe von drei Artikeln, in denen Sie mithilfe von AngularJs visuelle Anwendungen erstellen können. Die Beispielanwendung verwendet die Google -Diagramm -API, um Daten zu visualisieren. Wir werden eines der erstaunlichen Zwei-Wege-Bindungsfunktionen von Angular verwenden, um unsere Diagramme basierend auf Daten und Benutzereingaben dynamisch zu ändern. Bevor wir anfangen, verstehen wir zunächst, wie die Google -Charts -API verwendet wird. Für diese Anwendung bleiben wir einige grundlegende Diagramme wie Zeilendiagramme, Kreisdiagramme usw.

Google -Diagramme

Aus der Dokumentation von Google -Diagrammen finden Sie in den folgenden Beispielen schnell, wie die API von Google Diagrammen verwendet wird. Das erste Skript lädt die Ajax -API. Im zweiten Skript lädt die erste Zeile die Visualisierungs -API und die LineChart -Pakete. Die zweite Zeile legt eine Rückruffunktion fest, die ausgeführt wird, wenn die Google Visualisierungs -API geladen wird. Die Rückruffunktion erstellt eine Datentabelle, legt einige Diagrammoptionen ein, instanziiert unser Diagramm und erstellt das Diagramm.

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

Wenn Sie mit dieser API nicht vertraut sind oder eine Bewertung benötigen, empfehle ich Ihnen, die Dokumentation von Google -Diagrammen zu lesen.

AngularJS

Bevor Sie Angular verwenden, sollten Sie:

• node.js
installieren
• Klonsamenprojekt aus Github

Navigieren Sie vom Terminal zum Saatgutprojekt und geben Sie den folgenden Befehl ein:

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

Sie sollten die folgende Meldungsausgabe für die Konsole sehen:

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

Zu diesem Zeitpunkt können Sie die Demo -Seite anzeigen, indem Sie zu http: // localhost: 8000/app/index.html navigieren.

Angular verwendet den MVC-Entwurfsmodus (Modell-View-Controller). In diesem Tutorial konzentrieren wir uns auf Controller. Derzeit kann der Controller als Logik angesehen werden, die bestimmte Teile der Seite verarbeitet und Daten mithilfe von Ansichten rendert. Sobald wir mit dem Schreiben der Anwendung beginnen, werden wir ein besseres Verständnis dafür haben, was der Controller ist. Schauen wir uns nun das Angular Seed -Projekt an. Es handelt sich um eine Winkelanwendungsvorlage, auf der wir unsere Anwendung erstellen. Navigieren Sie im Angular Seed -Projekt zu App/JS. Dort können wir Controller, Anweisungen, Anwendungen, Filter und Dienste sehen. Dies sind das, was wir verwenden werden, wenn wir die Anwendung erstellen.

Erstellen Sie die Anwendung

Ersetzen Sie den Code in index.html durch den folgenden Code:

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

Controller

Wie bereits erwähnt, enthält der Controller Logik für die Verarbeitung bestimmter Teile der Seite. Beachten Sie im vorherigen Code -Beispiel bitte die folgende Zeile:

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

Dieser Div hat ein NG-Controller-Attribut mit einem Wert von myctrl1. MyCtrl1 ist der Name der Controller -Funktion, die in der Datei -App/js/Controllers.js gefunden wurde. Das NG-Controller-Attribut wird als -Direktive bezeichnet. Angular-Direktive wird zur Verbesserung der HTML verwendet, und die NG-Controller-Direktive wird verwendet, um Controller für bestimmte Teile einer Seite festzulegen. {{name}} ist eine Variable, mit der Daten vom Controller an die Ansicht übergeben werden. Die Frage ist nun, wie Sie auf den variablen Namen im MyCtrl1 -Controller zugreifen können. Hier kommt $ scope ins Spiel. $ scope ist ein Objekt, das als Kommunikationsmechanismus zwischen dem Controller und der Ansicht fungiert. Überprüfen Sie den modifizierten Controller.js -Code unten:

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

Im vorherigen Code haben wir $ Scope als Parameter bestanden und den variablen Namen festgelegt. Starten Sie nun einfach den Node.js -Server mit dem folgenden Befehl neu.

<!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>

Zeigen Sie nun die Browser -URL auf http: // localhost: 8000/app/index.html und der Name sollte angezeigt werden.

Erstellen Sie ein Diagramm

Zeichnen wir jetzt einige Diagramme. Geben Sie zunächst die AJAX -API in Index.html ein.

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

Ändern Sie als nächstes den Div in index.html wie unten gezeigt.

'use strict';

/* Controllers */

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

    }
  ]);

Laden Sie die Visualisierungs -API und das Linechart -Paket in Controllers.js.

node scripts/web-server.js

Nach dem Laden des Pakets müssen wir unsere Winkelanwendung initialisieren.

<🎜>

Angular.bootstrap ist eine globale API für die manuell starten Winkelanwendungen. Kopieren Sie einfach den Google -Diagramm -Erstellungscode in die Controller -Funktion und dies ist unser Endergebnis:

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

bearbeiten index.html und entfernen Sie Ng-App = "MyApp" aus dem HTML-Tag, bevor Sie den Code ausführen. NG-App verwendet Anwendungsstartelemente. Da wir dies bereits im Controller -Code (unter Verwendung der folgenden Codezeile) tun, können wir ihn aus dem HTML entfernen.

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

starten Sie den Knotenserver neu und besuchen Sie http: // localhost: 8000/app/index.html. Sie sollten ein Zeilendiagramm ansehen, das auf unseren virtuellen Daten basiert.

Schlussfolgerung

In diesem Teil dieses Tutorials konzentrieren wir uns auf Winkelregler. Im nächsten Artikel werden wir uns auf die Verwendung von Richtlinien und $ Scope konzentrieren. Gleichzeitig finden Sie den gesamten Code in diesem Artikel auf GitHub.

FAQ (FAQ) zum Erstellen visueller Anwendungen mithilfe von Google -Diagrammen -API und AngularJS

Wie kann man das Erscheinungsbild von Google -Diagrammen anpassen?

Die Google -Diagramm -API bietet eine breite Palette von Anpassungsoptionen, mit denen Sie das Erscheinungsbild eines Diagramms ändern können. Sie können Farben, Schriftarten, Netzlinien und mehr ändern. Um das Diagramm anzupassen, müssen Sie das Optionsobjekt in der Methode zeichnen () ändern. Um beispielsweise den Titel eines Diagramms zu ändern, können Sie den folgenden Code verwenden:

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

Denken Sie daran, dass Optionsobjekte viele Eigenschaften enthalten können, mit denen Sie Ihr Diagramm ausführlich anpassen können.

Wie füge ich Google -Diagrammen Interaktivität hinzu?

Die Google -Diagramm -API bietet mehrere Möglichkeiten, um den Diagrammen Interaktivität zu verleihen. Eine der häufigsten Methoden ist die Verwendung des "SELECT" -Ergners, das ausgelöst wird, wenn der Benutzer ein Element in der Tabelle auswählt. Sie können dem Diagramm einen Ereignishörer hinzufügen, der für das "Auswählen" -Ereigner hört und eine Aktion ausführt, wenn sie ausgelöst werden. Hier ist ein Beispiel:

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

In diesem Beispiel wird in diesem Beispiel ein Element im Diagramm ausgewählt, ein Warnfeld wird angezeigt, das den ausgewählten Elementwert zeigt.

Wie verwendet ich Google -Diagramme mit AngularJs?

Um Google-Diagramme mit AngularJS zu verwenden, können Sie das Paket für Angular-Google-Charts verwenden. Dieses Paket bietet eine Reihe von AngularJS -Direktiven, mit denen Sie Google -Diagramme problemlos in Ihre AngularJS -Anwendung integrieren können. Um das Paket zu installieren, können Sie den folgenden Befehl verwenden:

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

Nach dem Installieren des Pakets können Sie die vom Paket bereitgestellten Anweisungen verwenden, um die Diagramme zu erstellen und anzupassen.

Wie verbinde ich mehrere Datentables in Google -Diagrammen?

Sie können die Methode von Google.visualisation.data.Join () verwenden, um mehrere Datentables in Google -Diagrammen zu verbinden. Diese Methode dauert drei Datentabellen als Parameter: die erste DataTable, die zweite DataTable und die Schlüsselspalte jeder DataTable. Diese Methode gibt eine neue Datentabelle zurück, die Zeilen in zwei Datentabellen enthält, deren Schlüsselspaltenwerte übereinstimmen. Hier ist ein Beispiel:

<!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>

In diesem Beispiel sind DataTable1 und DataTable2 in der ersten Spalte jeder DataTable verbunden.

Welche Arten von Diagrammen kann ich mit Google -Diagrammen erstellen?

Die Google -Diagramm -API unterstützt verschiedene Diagrammtypen, darunter Zeilendiagramme, Balkendiagramme, Kreisdiagramme, Streudiagramme, Bereichsdiagramme und mehr. Jeder Diagrammtyp wird durch eine bestimmte Klasse in der API dargestellt und Sie können ein Diagramm erstellen, indem Sie Instanzen der entsprechenden Klasse erstellen. Um beispielsweise ein Zeilendiagramm zu erstellen, können Sie den folgenden Code verwenden:

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

In diesem Beispiel wird in einem neuen Zeilendiagramm in einem HTML -Element mit ID "chart_div" erstellt und angezeigt.

Das obige ist der detaillierte Inhalt vonErstellen einer Visualisierungs -App mithilfe der Google -Diagramme -API und AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!