{{name}}<\/div>\n \n \n \n \n \n \n \n<\/body>\n<\/html><\/pre>\n

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

Erstellen Sie ein Diagramm <\/strong> <\/p>\n

Zeichnen wir jetzt einige Diagramme. Geben Sie zun?chst die AJAX -API in Index.html ein. <\/p>\n

{{name}}<\/div><\/pre>\n
 ?ndern Sie als n?chstes den Div in index.html wie unten gezeigt. <\/p>\n
'use strict';\n\n\/* Controllers *\/\n\nangular.module('myApp.controllers', []).\n  controller('MyCtrl1', ['$scope',\n    function($scope) {\n      $scope.name = 'Jay';\n    }\n  ])\n  .controller('MyCtrl2', [\n    function() {\n\n    }\n  ]);<\/pre>\n
 Laden Sie die Visualisierungs -API und das Linechart -Paket in Controllers.js. <\/p>\n
node scripts\/web-server.js<\/pre>\n
 Nach dem Laden des Pakets müssen wir unsere Winkelanwendung initialisieren. <\/p>\n
<\/pre>\n
 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: <\/p>\n
<\/div><\/pre>\n
 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. <\/p>\n
google.load('visualization', '1', {packages:['corechart']});<\/pre>\n
 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. <\/p>\n
  Schlussfolgerung <\/strong> <\/p>
 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. <\/p>\n
  FAQ (FAQ) zum Erstellen visueller Anwendungen mithilfe von Google -Diagrammen -API und AngularJS <\/strong> <\/p>\n
 Wie kann man das Erscheinungsbild von Google -Diagrammen anpassen? <\/h3>\n
 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: <\/p>\n
\n\n
<\/div><\/pre>\n
 Denken Sie daran, dass Optionsobjekte viele Eigenschaften enthalten k?nnen, mit denen Sie Ihr Diagramm ausführlich anpassen k?nnen. <\/p>\n
 Wie füge ich Google -Diagrammen Interaktivit?t hinzu? <\/h3>\n
 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: <\/p>\n
cd angular-seed\nnode scripts\/web-server.js<\/pre>\n
 In diesem Beispiel wird in diesem Beispiel ein Element im Diagramm ausgew?hlt, ein Warnfeld wird angezeigt, das den ausgew?hlten Elementwert zeigt. <\/p>\n
 Wie verwendet ich Google -Diagramme mit AngularJs? <\/h3>\n
 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: <\/p>\n
HTTP Server running at http:\/\/localhost:8000\/<\/code><\/pre>\n
 Nach dem Installieren des Pakets k?nnen Sie die vom Paket bereitgestellten Anweisungen verwenden, um die Diagramme zu erstellen und anzupassen. <\/p>\n
 Wie verbinde ich mehrere Datentables in Google -Diagrammen? <\/h3>\n
 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: <\/p>\n
\n\n\n  \n