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

Ce didacticiel montre comment créer une application de visualisation de données à l'aide de l'API Google Charts et AngularJS, en se concentrant sur la liaison de données bidirectionnelle. Les pièces précédentes couvraient les contrôleurs et les directives; Cette pièce explore comment modifier dynamiquement les types de graphiques via un menu déroulant.

Caractéristiques de clé:

• Un menu déroulant permet aux utilisateurs de sélectionner les types de graphiques (Piechart, BarChart, ScatterChart, LineChart).
• La liaison des données bidirectionnelle d'AngularJS met automatiquement à jour la vue du graphique lorsque le modèle (type de graphique sélectionné) modifie.
• ngOptions et ngModel lier efficacement les options déroulantes et la valeur sélectionnée.
• ngChange et $scope.$watch Reriger dynamiquement le graphique en fonction de la sélection des utilisateurs.

Implémentation de la liste déroulante et de la liaison des données:

La liste déroulante est ajoutée à index.html en tant qu'élément <select></select>. Au lieu d'options de codage dur, nous définissons les types de graphiques dans controllers.js en utilisant une approche angularjs:

<code class="language-javascript">$scope.chartTypes = [
  {typeName: 'PieChart', typeValue: '1'},
  {typeName: 'BarChart', typeValue: '2'},
  {typeName: 'ColumnChart', typeValue: '3'},
  {typeName: 'LineChart', typeValue: '4'}
];
$scope.chartType = $scope.chartTypes[0];</code>

L'élément index.html <select></select> utilise ng-options et ng-model pour la liaison des données:

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

La directive ng-controller dans index.html doit être attachée à l'élément corporel pour une fonctionnalité appropriée.

Mises à jour du graphique dynamique:

La fonction selectType dans controllers.js met à jour le type de graphique en fonction de la sélection déroulante:

<code class="language-javascript">$scope.selectType = function(type) {
  $scope.chart.type = type.typeValue;
};</code>

La directive gChart dans directives.js utilise $scope.$watch pour surveiller les changements dans $scope.chart et redessiner le graphique en conséquence:

<code class="language-javascript">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);
}</code>

N'oubliez pas de démarrer le serveur de nœuds (node scripts/web-server.js) et accédez à http://localhost:8000/app/index.html pour voir l'application. Le code complet est disponible sur github (lien non fourni, car il n'était pas dans l'entrée).

Questions fréquemment posées (FAQ): (La section FAQ de l'entrée a été omise ici de garder la réponse concise. Les informations fournies abordent suffisamment la fonctionnalité de base du tutoriel.)

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!