Membuat aplikasi visualisasi menggunakan API Google Charts dan AngularJS - PT 3

Tutorial ini menunjukkan cara membina aplikasi visualisasi data menggunakan API Google Charts dan AngularJS, yang memberi tumpuan kepada pengikatan data dua hala. Bahagian sebelumnya meliputi pengawal dan arahan; Bahagian ini meneroka cara menukar jenis carta secara dinamik melalui menu dropdown.

Ciri -ciri Utama:

Menu dropdown membolehkan pengguna memilih jenis carta (piechart, barchart, scatterchart, linechart).
data dua hala AngularJS mengikat secara automatik mengemas kini pandangan carta apabila model (jenis carta terpilih) berubah.
• dan ngOptions dengan cekap mengikat pilihan dropdown dan nilai yang dipilih. ngModel
• dan ngChange rerender secara dinamik carta berdasarkan pemilihan pengguna. $scope.$watch

Melaksanakan dropdown dan pengikatan data:

Dropdown ditambah kepada

sebagai elemen index.html. Daripada pilihan pengekodan, kami menentukan jenis carta dalam <select></select> menggunakan pendekatan AngularJS: controllers.js

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

unsur

index.html menggunakan <select></select> dan ng-options untuk mengikat data: ng-model

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

arahan

dalam ng-controller harus dilampirkan pada elemen badan untuk fungsi yang betul. index.html

Kemas kini carta dinamik:

fungsi

dalam selectType mengemas kini jenis carta berdasarkan pemilihan dropdown: controllers.js

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

arahan

dalam gChart menggunakan directives.js untuk memantau perubahan dalam $scope.$watch dan redraw carta dengan sewajarnya: $scope.chart

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

ingat untuk memulakan pelayan nod () dan navigasi ke

untuk melihat aplikasi. Kod lengkap boleh didapati di GitHub (pautan tidak disediakan, kerana ia tidak dalam input). node scripts/web-server.js http://localhost:8000/app/index.html

Soalan -soalan yang sering ditanya (Soalan Lazim):

(bahagian Soalan Lazim dari input telah ditinggalkan di sini untuk memastikan respons ringkas. Maklumat yang disediakan cukup menangani fungsi teras tutorial.)

Atas ialah kandungan terperinci Membuat aplikasi visualisasi menggunakan API Google Charts dan AngularJS - PT 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!