Erstellen einer Visualisierungs -App mithilfe der Google Diagrts API und AngularJS - Pt 3

Dieses Tutorial zeigt, wie eine Datenvisualisierungsanwendung mithilfe der Google-Diagramme-API und AngularJS erstellt wird und sich auf die Bindung von Zwei-Wege-Daten konzentriert. Frühere Teile bedeckten Controller und Richtlinien; In diesem Teil wird untersucht, wie Sie die Diagrammtypen über ein Dropdown -Menü dynamisch ändern.

Schlüsselmerkmale:

• In einem Dropdown -Menü können Benutzer Diagrammtypen auswählen (Piechart, Barchart, Scatterchart, LineChart).
• AngularJSs Zwei-Wege-Datenbindung aktualisiert automatisch die Ansicht des Diagramms, wenn sich das Modell (ausgewählter Diagrammtyp) ändert.
• ngOptions und ngModel binden die Dropdown -Optionen und den ausgewählten Wert effizient.
• ngChange und $scope.$watch dynamisch das Diagramm basierend auf der Benutzerauswahl.

Implementierung der Dropdown- und Datenbindung:

Der Dropdown wird zu index.html als <select></select> Element hinzugefügt. Anstelle von Hardcoding -Optionen definieren wir Diagrammtypen in controllers.js unter Verwendung eines AngularJS -Ansatzes:

$scope.chartTypes = [
  {typeName: 'PieChart', typeValue: '1'},
  {typeName: 'BarChart', typeValue: '2'},
  {typeName: 'ColumnChart', typeValue: '3'},
  {typeName: 'LineChart', typeValue: '4'}
];
$scope.chartType = $scope.chartTypes[0];

Das Element index.html <select> verwendet ng-options und ng-model für die Datenbindung:

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

Die ng-controller -Richtlinie in index.html sollte an das Körperelement angehängt werden, um eine ordnungsgemäße Funktionalität zu erhalten.

Dynamische Diagrammaktualisierungen:

Die Funktion selectType in controllers.js aktualisiert den Diagrammtyp basierend auf der Dropdown -Auswahl:

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

Die gChart -Richtlinie in directives.js verwendet $scope.$watch, um Änderungen in $scope.chart zu überwachen und das Diagramm entsprechend neu zu zeichnen:

link: function($scope, elm, attrs) {
  $scope.$watch('chart', function() {
    var type = $scope.chart.type;
    var chart = '';

    // Conditional chart creation based on type
    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);
}

Denken Sie daran, den Knotenserver (node scripts/web-server.js) zu starten und zu http://localhost:8000/app/index.html zu navigieren, um die Anwendung anzuzeigen. Der vollständige Code ist auf GitHub verfügbar (Link nicht bereitgestellt, da er nicht in der Eingabe war).

häufig gestellte Fragen (FAQs): (Der FAQS -Abschnitt der Eingabe wurde hier weggelassen, um die Antwort präzise zu halten. Die bereitgestellten Informationen befassen sich ausreichend mit der Kernfunktionalität des Tutorials.)

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