Membuat aplikasi visualisasi menggunakan API Google Charts dan AngularJS

mata teras

AngularJS, rangka kerja JavaScript yang popular di Google, boleh digunakan untuk membina aplikasi visual dinamik yang memanfaatkan API Google Charts. Ciri mengikat dua hala Angular membolehkan carta berubah secara dinamik berdasarkan data dan input pengguna.
Mewujudkan aplikasi visual dengan AngularJS melibatkan beberapa langkah, seperti menubuhkan sudut, membina aplikasi, dan membuat carta. Proses ini memerlukan kod menulis dalam HTML dan JavaScript, menggunakan corak reka bentuk MVC Angular, dan mengintegrasikan API Google Charts untuk visualisasi.
API Carta Google menyediakan pelbagai pilihan penyesuaian carta, termasuk perubahan warna, fon, dan garisan grid. Ia juga menyediakan ciri -ciri interaktif seperti mencetuskan peristiwa apabila pengguna memilih item pada carta. Untuk menggunakan carta Google dengan AngularJs, pemaju boleh menggunakan pakej carta sudut-google.

JavaScript ada di mana -mana hari ini. Banyak rangka kerja JavaScript yang berguna, seperti Ember.js, Backbone.js, dan lain -lain, mengubah wajah web. Salah satu kerangka yang paling popular adalah AngularJS yang dibangunkan oleh Google. Artikel ini adalah yang pertama dalam satu siri tiga artikel yang akan mengajar anda bagaimana untuk membina aplikasi visual menggunakan AngularJS. Aplikasi sampel akan menggunakan API Google Charts untuk memvisualisasikan data. Kami akan menggunakan salah satu ciri mengikat dua hala yang menakjubkan untuk menjadikan carta kami berubah secara dinamik berdasarkan data dan input pengguna. Sebelum kita memulakan, mari kita faham bagaimana menggunakan API Google Charts. Untuk aplikasi ini, kami akan berpegang dengan beberapa carta asas seperti carta garis, carta pai, dll.

Google Charts

Dari dokumentasi Google Charts, contoh -contoh berikut dengan cepat menyemak cara menggunakan API Google Charts. Skrip pertama memuat AJAX API. Dalam skrip kedua, baris pertama memuatkan API Visualisasi dan Pakej Linechart. Baris kedua menetapkan fungsi panggil balik yang berjalan apabila API Visualisasi Google dimuatkan. Fungsi panggil balik mencipta jadual data, menetapkan beberapa pilihan carta, meneliti carta kami dan membuat carta.

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

Jika anda tidak biasa dengan API ini, atau memerlukan ulasan, saya cadangkan anda membaca dokumentasi Google Charts.

AngularJS

Sebelum mula menggunakan sudut, anda harus:

Pasang node.js
Projek Benih Klon dari GitHub

navigasi dari terminal ke projek benih dan masukkan perintah berikut:

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

anda harus melihat output mesej berikut ke konsol:

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

Pada ketika ini, anda boleh melihat halaman demo dengan menavigasi ke http: // localhost: 8000/app/index.html.

menggunakan mod reka bentuk MVC (model-view-controller). Dalam tutorial ini, kami akan memberi tumpuan kepada pengawal. Pada masa ini, pengawal boleh dianggap sebagai logik yang memproses bahagian tertentu halaman dan membuat data menggunakan pandangan. Sebaik sahaja kita mula menulis permohonan, kita akan mempunyai pemahaman yang lebih baik tentang apa pengawal itu. Sekarang, mari kita lihat projek benih sudut. Ia adalah templat aplikasi sudut di mana kami akan membina permohonan kami. Dalam projek benih sudut, navigasi ke App/JS. Di sana kita dapat melihat pengawal, arahan, aplikasi, penapis, dan perkhidmatan. Ini adalah apa yang akan kita gunakan apabila kita membuat aplikasi.

Bina aplikasi

Gantikan kod dalam index.html dengan kod berikut:

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

pengawal

Seperti yang dinyatakan sebelum ini, pengawal mengandungi logik untuk memproses bahagian tertentu halaman. Dalam contoh kod sebelumnya, sila ambil perhatian baris berikut:

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

Div ini mempunyai atribut NG-Controller dengan nilai myctrl1. MyCtrl1 adalah nama fungsi pengawal yang terdapat dalam aplikasi fail/js/controllers.js. Atribut NG-Controller dipanggil Arahan . Arahan sudut digunakan untuk meningkatkan HTML, dan Arahan NG-Controller digunakan untuk menetapkan pengawal untuk bahagian tertentu halaman. {{name}} adalah pembolehubah yang digunakan untuk lulus data dari pengawal ke pandangan. Sekarang, persoalannya ialah bagaimana untuk mengakses nama pembolehubah di dalam pengawal myctrl1. Di sinilah $ skop dimainkan. $ skop adalah objek yang bertindak sebagai mekanisme komunikasi antara pengawal dan pandangan. Semak kod Controllers.js yang diubahsuai di bawah:

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

Dalam kod sebelumnya, kami lulus $ skop sebagai parameter dan menetapkan nama pembolehubah. Sekarang, mulakan semula pelayan Node.js dengan arahan berikut.

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

Sekarang, arahkan URL penyemak imbas ke http: // localhost: 8000/app/index.html dan nama harus dipaparkan.

Buat carta

Sekarang, mari kita lukis beberapa carta. Pertama, sertakan AJAX API dalam index.html.

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

Seterusnya, ubah suai div dalam index.html seperti yang ditunjukkan di bawah.

'use strict';

/* Controllers */

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

    }
  ]);

Muatkan API Visualisasi dan Pakej Linechart dalam Controllers.js.

node scripts/web-server.js

Selepas memuatkan pakej, kita perlu memulakan aplikasi sudut kita.

<🎜>

angular.bootstrap adalah API global untuk memulakan aplikasi sudut secara manual. Hanya salin dan tampal kod penciptaan carta Google ke dalam fungsi pengawal, dan ini adalah hasil akhir kami:

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

edit index.html dan keluarkan ng-app = "myApp" dari tag HTML sebelum menjalankan kod. NG-app menggunakan elemen boot aplikasi. Walau bagaimanapun, kerana kita sudah melakukan ini dalam kod pengawal (menggunakan baris kod berikut), kita boleh mengeluarkannya dari HTML.

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

Mulakan semula pelayan nod dan lawati http: // localhost: 8000/app/index.html. Anda harus melihat carta garis berdasarkan data maya kami.

Kesimpulan

Di bahagian tutorial ini, kami memberi tumpuan kepada pengawal sudut. Dalam artikel seterusnya, kami akan memberi tumpuan kepada penggunaan arahan dan skop $. Pada masa yang sama, semua kod dalam artikel ini boleh didapati di GitHub.

FAQ (FAQ) untuk membuat aplikasi visual menggunakan Google Charts API dan AngularJS

Bagaimana untuk menyesuaikan penampilan carta Google?

Google Charts API menyediakan pelbagai pilihan penyesuaian yang membolehkan anda mengubah suai penampilan carta. Anda boleh menukar warna, fon, garisan grid, dan banyak lagi. Untuk menyesuaikan carta, anda perlu mengubahsuai objek pilihan dalam kaedah carta () carta. Sebagai contoh, untuk menukar tajuk carta, anda boleh menggunakan kod berikut:

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

ingat bahawa objek pilihan boleh mengandungi banyak sifat yang membolehkan anda menyesuaikan carta anda secara meluas.

Bagaimana untuk menambah interaktiviti ke carta Google?

API Carta Google menyediakan pelbagai cara untuk menambah interaktiviti kepada carta. Salah satu kaedah yang paling biasa ialah menggunakan acara "Pilih", yang dicetuskan apabila pengguna memilih item pada carta. Anda boleh menambah pendengar acara ke carta yang mendengar acara "Pilih" dan melakukan tindakan apabila dicetuskan. Berikut adalah contoh:

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

Dalam contoh ini, apabila pengguna memilih item pada carta, kotak amaran muncul menunjukkan nilai item yang dipilih.

Bagaimana menggunakan carta google dengan angularjs?

Untuk menggunakan carta google dengan angularjs, anda boleh menggunakan pakej sudut-google-carta. Pakej ini menyediakan satu set arahan AngularJS yang membolehkan anda dengan mudah mengintegrasikan carta Google ke dalam aplikasi AngularJS anda. Untuk memasang pakej, anda boleh menggunakan arahan berikut:

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

Selepas memasang pakej, anda boleh menggunakan arahan yang disediakan oleh pakej untuk membuat dan menyesuaikan carta.

Bagaimana untuk menyambungkan pelbagai data dalam carta Google?

Anda boleh menggunakan kaedah Google.Visualisasi.data.join () untuk menyambungkan pelbagai data dalam carta Google. Kaedah ini mengambil tiga datatables sebagai parameter: DataTable pertama, data kedua, dan lajur utama setiap datatiable. Kaedah ini mengembalikan data baru yang mengandungi baris dalam dua data yang nilai lajur utama yang sepadan. Berikut adalah contoh:

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

Dalam contoh ini, DataTable1 dan DataTable2 disambungkan pada lajur pertama setiap datatiable.

Apakah jenis carta yang boleh saya buat menggunakan carta Google?

API Carta Google menyokong pelbagai jenis carta, termasuk carta garis, carta bar, carta pai, carta penyebaran, carta kawasan, dan banyak lagi. Setiap jenis carta diwakili oleh kelas tertentu dalam API, dan anda boleh membuat carta dengan membuat contoh kelas yang sepadan. Sebagai contoh, untuk membuat carta baris, anda boleh menggunakan kod berikut:

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

Dalam contoh ini, carta baris baru dicipta dan dipaparkan dalam elemen HTML dengan id "chart_div".

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