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

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

Buat carta <\/strong> <\/p>\n

Sekarang, mari kita lukis beberapa carta. Pertama, sertakan AJAX API dalam index.html. <\/p>\n

{{name}}<\/div><\/pre>\n
 Seterusnya, ubah suai div dalam index.html seperti yang ditunjukkan di bawah. <\/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
 Muatkan API Visualisasi dan Pakej Linechart dalam Controllers.js. <\/p>\n
node scripts\/web-server.js<\/pre>\n
 Selepas memuatkan pakej, kita perlu memulakan aplikasi sudut kita. <\/p>\n
<\/pre>\n
 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: <\/p>\n
<\/div><\/pre>\n
 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. <\/p>\n
google.load('visualization', '1', {packages:['corechart']});<\/pre>\n
 Mulakan semula pelayan nod dan lawati http: \/\/ localhost: 8000\/app\/index.html. Anda harus melihat carta garis berdasarkan data maya kami. <\/p>\n
  Kesimpulan <\/strong> <\/p>
 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. <\/p>\n
  FAQ (FAQ) untuk membuat aplikasi visual menggunakan Google Charts API dan AngularJS <\/strong> <\/p>\n
 Bagaimana untuk menyesuaikan penampilan carta Google? <\/h3>\n
 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: <\/p>\n
\n\n
<\/div><\/pre>\n
 ingat bahawa objek pilihan boleh mengandungi banyak sifat yang membolehkan anda menyesuaikan carta anda secara meluas. <\/p>\n
 Bagaimana untuk menambah interaktiviti ke carta Google? <\/h3>\n
 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: <\/p>\n
cd angular-seed\nnode scripts\/web-server.js<\/pre>\n
 Dalam contoh ini, apabila pengguna memilih item pada carta, kotak amaran muncul menunjukkan nilai item yang dipilih. <\/p>\n
 Bagaimana menggunakan carta google dengan angularjs? <\/h3>\n
 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: <\/p>\n
HTTP Server running at http:\/\/localhost:8000\/<\/code><\/pre>\n
 Selepas memasang pakej, anda boleh menggunakan arahan yang disediakan oleh pakej untuk membuat dan menyesuaikan carta. <\/p>\n
 Bagaimana untuk menyambungkan pelbagai data dalam carta Google? <\/h3>\n
 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: <\/p>\n
\n\n\n  \n