Membina komponen carta dengan Angular 2 dan FusionCharts
Feb 17, 2025 pm 12:51 PM
- Gunakan Angular 2 untuk komponen carta bangunan, memanfaatkan penambahbaikannya ke atas sudut 1.x, termasuk sokongan bahasa yang dipertingkatkan dan pengurusan DOM.
- Mengintegrasikan FusionCharts dengan Angular 2 untuk mencipta carta visual yang menarik, walaupun kekurangan plugin Angular 2 yang berdedikasi, dengan pengekodan secara langsung dengan JavaScript.
- Membangunkan komponen carta dinamik yang mampu menukarkan antara dataset (mis., 2014 dan 2015 statistik pendapatan untuk syarikat teknologi utama), meningkatkan interaktiviti dan penglibatan pengguna.
- Gunakan ciri anotasi FusionCharts untuk menyesuaikan carta, seperti menambah logo syarikat ke paksi carta, yang menyediakan pengalaman visual yang disesuaikan.
- Terokai fungsi dan kemungkinan integrasi lebih lanjut dengan Angular 2 dan FusionCharts, menggalakkan pembaca untuk mengembangkan komponen carta asas dengan konfigurasi dan jenis carta yang lebih kompleks.
Sebagai pemaju web, jika ada sesuatu yang anda tidak boleh ketinggalan, ia adalah Angular 2. Ia adalah penulisan semula lengkap dari rangka kerja JavaScript yang popular dari Google dan sentiasa dalam berita untuk semua sebab yang tepat. Ia menawarkan beberapa penambahbaikan utama ke atas versi terdahulu dan itulah sebabnya kami memilihnya hari ini untuk membina beberapa carta yang indah.
Untuk carta, kami akan menggunakan perpustakaan carta JavaScript yang disediakan oleh FusionCharts. Ia menawarkan koleksi carta yang baik dan serasi dengan semua pelayar utama. Walaupun FusionCharts menawarkan plugin khusus untuk Angular, ia belum serasi dengan Angular 2. Jadi saya tidak akan menggunakannya dan sebaliknya kod secara langsung menggunakan JavaScript dan Angular 2. Anda menggunakan Angular 1 dalam aplikasi anda
).carta yang akan kita plot akan menggambarkan statistik yang menarik -pendapatan lima syarikat teknologi terkemuka (Amazon, Apple, Facebook, Google dan Microsoft) dan akan mempunyai pilihan untuk menukar antara data pendapatan untuk 2014 dan 2015. Kami Mula-mula akan melalui proses langkah demi langkah untuk membuat carta dalam Angular 2. Setelah membina carta asas, kami akan merangkumi beberapa topik lanjutan seperti menambah anotasi dan mengemas kini data carta.
Seperti biasa, anda boleh memuat turun kod untuk tutorial ini dari repo GitHub kami, atau anda boleh melompat ke demo carta siap pada akhir artikel.sudut 2 vs sudut 1.x
Angular 2 mempunyai beberapa perubahan ketara ke atas versi utama terdahulu (Angular 1.x), contohnya sokongannya untuk bahasa seperti TypeScript dan Dart, dan cara ia mengira kemas kini ke DOM. Jika anda ingin mengetahui lebih lanjut mengenai bagaimana peta Konsep dan Teknik Angular 1 ke Angular 2, anda boleh menyemak rujukan cepat rasmi. Jika anda berminat untuk memindahkan aplikasi anda dari Angular 1.x ke Angular 2, anda boleh membaca panduan penghijrahan rasmi.
Walaupun sudut 2 menyokong TypeScript dan Dart, kami akan menggunakan JavaScript asli untuk menulis aplikasi Angular 2 dalam tutorial ini kerana kebiasaannya. Menggunakan TypeScript atau Dart juga akan memperkenalkan langkah membina yang tidak perlu.
persediaan
Terdapat beberapa cara untuk bangun dan berjalan dengan projek Angular 2. Yang paling mudah adalah untuk menuju ke tapak rasmi dan mengikuti tutorial 5 minit QuickStart mereka.
Satu kaveat sedikit untuk pendekatan ini bagaimanapun, adalah bahawa ia bergantung kepada anda yang mempunyai nod dan NPM yang dipasang pada mesin anda. Kami mempunyai panduan untuk ini, tetapi jika anda lebih suka mengikuti tutorial ini tanpa memasang ini, anda boleh menggunakan templat berikut:
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span> <span><span><span><head</span>></span>
</span> <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span> <span><span><span><title</span>></span>Angular 2 FusionCharts Demo<span><span></title</span>></span>
</span>
<span><!-- 1. Load custom CSS & fonts-->
</span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span> <span><span><span><link</span> href<span>='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300'</span> rel<span>='stylesheet'</span>></span>
</span>
<span><!-- 2. Load Angular 2 specific libraries -->
</span> <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</span>></span><span><span></script</span>></span>
</span>
<span><!-- 3. Load FusionCharts library-->
</span> <span><span><span><script</span> src<span>="https://static.fusioncharts.com/code/latest/fusioncharts.js"</span>></span><span><span></script</span>></span>
</span>
<span><!-- 4. Load component -->
</span> <span><span><span><script</span> src<span>='main.js'</span>></span><span><span></script</span>></span>
</span> <span><span><span></head</span>></span>
</span> <span><span><span><body</span>></span>
</span>
<span><!-- 5. Display the application -->
</span> <span><span><span><angular-chart</span>></span>Loading...<span><span></angular-chart</span>></span>
</span> <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
Membuat komponen carta
Komponen adalah blok bangunan mana -mana aplikasi Angular 2. Mereka boleh digunakan semula kod yang terdiri daripada pandangan, dan beberapa logik. Jika anda biasa dengan Angular 1, anda boleh memikirkannya sebagai arahan dengan templat dan pengawal.
inilah asas komponen carta kami:
<span>(function(chartApp){
</span> chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({
</span> <span>selector: 'angular-chart',
</span> <span>template: '<div>Chart will render here</div>'
</span> <span>}).<span>Class</span>({
</span> <span>constructor: function(){}
</span> <span>});
</span>
<span>document.addEventListener('DOMContentLoaded', function() {
</span> ng<span>.platform.browser.bootstrap(chartApp.<span>AppComponent</span>);
</span> <span>});
</span><span>})(window.chartApp || (window.chartApp = {}));
</span>
mari kita ambil satu saat untuk melihat apa yang sedang berlaku.
kita mulakan dengan IIFE (dengan segera menggunakan ekspresi fungsi) yang kami gunakan untuk ruang nama aplikasi kami. Kami lulus Window.ChartApp sebagai hujah, yang dimulakan ke objek kosong jika tidak ditakrifkan. Di sinilah permohonan kami akan hidup -dalam satu harta di objek global.
Di dalam IIFE kami membuat komponen kami (AppComponent) dengan mengikat kaedah komponen dan kelas dari Ng.Core (koleksi komponen teras Angular). Kami lulus kaedah komponen objek konfigurasi yang mengandungi propeties berikut:
-
pemilih: pemilih CSS mudah yang menentukan elemen HTML host. Angular akan membuat dan memaparkan contoh komponen setiap kali ia menemui elemen HTML yang sepadan dengan pemilih ini.
-
Templat: Templat yang akan digunakan apabila komponen diberikan. Pada masa ini kami lulus rentetan yang mengandungi elemen
letak, tetapi idealnya kita harus memindahkannya ke dalam templatnya sendiri.Kaedah kelas adalah di mana kita menambah tingkah laku dan pengikatan peristiwa untuk template.
Setelah menentukan komponen asas kami, kami memulakannya menggunakan fungsi pelayar Bootstrap Angular.
anda sepatutnya dapat menjalankan kod dalam penyemak imbas anda pada ketika ini dan melihat mesej "carta akan diberikan di sini".
Membuat carta
mari kita teruskan untuk membuat carta dan memaparkan beberapa data untuk 2014.
untuk melakukan ini, kita perlu menggunakan fungsi pembina FusionCharts yang mana kita lulus objek yang mengandungi semua parameter konfigurasi untuk contoh carta:
- Jenis: Jenis carta yang kami ingin buat
- renderat: pemilih dom ke mana carta kami akan diberikan
- Lebar dan Ketinggian: Dimensi carta
- id: ID carta yang dihasilkan
- DataFormat: Format data yang dihantar ke pilihan data sumber
- DataSource: Konfigurasi untuk carta sebenar, serta data yang harus dipaparkan
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><meta</span> charset<span>="UTF-8"</span>></span> </span> <span><span><span><title</span>></span>Angular 2 FusionCharts Demo<span><span></title</span>></span> </span> <span><!-- 1. Load custom CSS & fonts--> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span> </span> <span><span><span><link</span> href<span>='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300'</span> rel<span>='stylesheet'</span>></span> </span> <span><!-- 2. Load Angular 2 specific libraries --> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</span>></span><span><span></script</span>></span> </span> <span><!-- 3. Load FusionCharts library--> </span> <span><span><span><script</span> src<span>="https://static.fusioncharts.com/code/latest/fusioncharts.js"</span>></span><span><span></script</span>></span> </span> <span><!-- 4. Load component --> </span> <span><span><span><script</span> src<span>='main.js'</span>></span><span><span></script</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><!-- 5. Display the application --> </span> <span><span><span><angular-chart</span>></span>Loading...<span><span></angular-chart</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>Inilah fail konfigurasi lengkap.
Jika anda tidak pasti apa yang sebenarnya dilakukan oleh mana -mana pilihan carta, atau jika anda ingin mengetahui bagaimana lagi penampilan carta boleh dikonfigurasikan, anda boleh merujuk kepada halaman atribut carta dalam dokumentasi FusionCarts.
Perkara lain yang perlu kita lakukan ialah mengemas kini templat kami untuk memasukkan bekas carta kami harus dimasukkan ke dalam. Anda boleh melakukan ini dengan menentukan rentetan ke harta templat komponen (seperti yang kami lakukan sebelum ini), atau dengan menggerakkan templat ke dalam failnya sendiri dan merujuknya menggunakan templateurl.
<span>(function(chartApp){ </span> chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({ </span> <span>selector: 'angular-chart', </span> <span>template: '<div>Chart will render here</div>' </span> <span>}).<span>Class</span>({ </span> <span>constructor: function(){} </span> <span>}); </span> <span>document.addEventListener('DOMContentLoaded', function() { </span> ng<span>.platform.browser.bootstrap(chartApp.<span>AppComponent</span>); </span> <span>}); </span><span>})(window.chartApp || (window.chartApp = {})); </span>Sama ada cara, inilah yang kelihatan seperti templat kita.
<span>new FusionCharts({ </span> <span>"type": "column2d", </span> <span>"renderAt": "chart-container", </span> <span>"width": "550", </span> <span>"height": "400", </span> <span>"id": "revenue-chart", </span> <span>"dataFormat": "json", </span> <span>"dataSource": { </span> <span>"chart": { </span> <span>"yAxisName": "Revenue (In USD Billion)", </span> <span>"yAxisMaxValue": "200", </span> <span>... </span> <span>}, </span> <span>"data": [{ </span> <span>"label": "Amazon", </span> <span>"value": "88.99" </span> <span>}, { </span> <span>"label": "Apple", </span> <span>"value": "182.8" </span> <span>} </span> <span>... </span> <span>] </span> <span>} </span><span>}); </span>inilah demo dari apa yang kita ada setakat ini:
anda boleh melihat kod untuk demo ini di Plunker.
Jika anda mengklik ke demo pada Plunker, dalam fail utama.js anda mungkin melihat bahawa kami telah memisahkan data konfigurasi FusionCharts ke dalam failnya sendiri, yang kemudian kami ambil menggunakan kelas HTTP Angular. Ini adalah demi kejelasan (ia menjadikan kod khusus sudut lebih mudah untuk diikuti) dan juga kerana membuat permintaan untuk data adalah apa yang biasanya anda lakukan dalam senario kehidupan sebenar.
Walau bagaimanapun, ini tidak semestinya diperlukan, dan anda akan mendapat hasil yang sama dengan melakukan segala -galanya secara langsung dalam pembina ChartApp:
Satu -satunya perkara lain yang disebutkan ialah kod inisialisasi dibalut dalam kaedah FusionCharts.ready. Ini melindungi kod instantiasi carta anda daripada dipanggil sebelum perpustakaan FusionCharts dimuatkan.chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({ </span> <span>selector: 'angular-chart', </span> <span>templateUrl: 'chart.html' </span><span>}).<span>Class</span>({ </span> <span>... </span><span>}); </span>Dengan carta asas siap, sudah tiba masanya untuk menambah lebih banyak fungsi, seperti menggunakan logo syarikat dan bukannya nama dan mengemas kini carta dengan data baru untuk tahun 2015.
Menambah anotasi
Untuk menambah logo syarikat ke paksi-x, kami akan menggunakan salah satu ciri kuat FusionCharts-
anotasi. Anotasi pada objek FusionCharts membolehkan anda melukis bentuk atau imej tersuai pada kedudukan yang ditetapkan pada carta.
Katakan anda mahu menambah logo syarikat anda di pusat carta. Anda boleh melakukannya menggunakan anotasi dan makro. Macros akan memberi anda koordinat pusat carta dan anotasi akan membolehkan anda menambah imej di lokasi tersebut.
Perkara menjadi menarik apabila anda menggunakan anotasi dinamik untuk, sebagai contoh, dapatkan maklumat mengenai kedudukan yang bergantung kepada data carta. Bayangkan anda mahu melukis sesuatu di mana lajur berakhir. Anda boleh menggunakan anotasi dinamik makro $ dataset.0.set.1.endx dan $ dataset.0.set.1.endy Untuk menentukan koordinat X dan Y pada titik akhir lajur, kemudian lukis sesuatu di sana. Anda boleh mengetahui lebih lanjut mengenai anotasi dan cara menggunakannya di halaman dokumentasi FusionCharts ini.
Untuk carta kami, kami akan menggunakan makro anotasi dinamik untuk mendapatkan koordinat awal dan menamatkan setiap lajur, di mana kami akan menarik logo syarikat masing -masing. Kami juga akan melumpuhkan label paksi x lalai menggunakan atribut carta "showlabels": "0".
Untuk mencapai matlamat di atas, tambahkan kod berikut ke konfigurasi carta:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><meta</span> charset<span>="UTF-8"</span>></span> </span> <span><span><span><title</span>></span>Angular 2 FusionCharts Demo<span><span></title</span>></span> </span> <span><!-- 1. Load custom CSS & fonts--> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span> </span> <span><span><span><link</span> href<span>='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300'</span> rel<span>='stylesheet'</span>></span> </span> <span><!-- 2. Load Angular 2 specific libraries --> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</span>></span><span><span></script</span>></span> </span> <span><!-- 3. Load FusionCharts library--> </span> <span><span><span><script</span> src<span>="https://static.fusioncharts.com/code/latest/fusioncharts.js"</span>></span><span><span></script</span>></span> </span> <span><!-- 4. Load component --> </span> <span><span><span><script</span> src<span>='main.js'</span>></span><span><span></script</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><!-- 5. Display the application --> </span> <span><span><span><angular-chart</span>></span>Loading...<span><span></angular-chart</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>dalam kod di atas:
- jenis menetapkan jenis anotasi.
- URL menetapkan alamat imej.
- x dan y menetapkan permulaan x dan y-koordinat imej.
Selepas menambah kod di atas, anda harus melihat logo syarikat yang diberikan pada paksi-x. Untuk mengetahui lebih lanjut mengenai menggunakan anotasi dan apa lagi yang mungkin, sila rujuk halaman dokumentasi (disebutkan di atas).
Toggling antara dataset
Perkara terakhir yang ingin kita laksanakan adalah untuk membolehkan pengguna bertukar -tukar antara tahun, melihat dataset yang berbeza bergantung pada tahun yang dipilih (2014 atau 2015).
Penstrukturan data.
Oleh itu, kita perlu mempertimbangkan bagaimana untuk menyusun data kita dengan cara yang kita dapat menentukan dataset yang berbeza untuk tahun -tahun yang berbeza. Seperti yang dinyatakan sebelum ini, FusionCharts menjangkakan pilihan konfigurasi untuk mengandungi harta data, yang sepatutnya menjadi array yang mengandungi set label/pasangan nilai.<span>(function(chartApp){ </span> chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({ </span> <span>selector: 'angular-chart', </span> <span>template: '<div>Chart will render here</div>' </span> <span>}).<span>Class</span>({ </span> <span>constructor: function(){} </span> <span>}); </span> <span>document.addEventListener('DOMContentLoaded', function() { </span> ng<span>.platform.browser.bootstrap(chartApp.<span>AppComponent</span>); </span> <span>}); </span><span>})(window.chartApp || (window.chartApp = {})); </span>Satu cara mengendalikan pelbagai dataset adalah untuk menentukan objek dataset di bahagian atas fungsi pembina kami dan melampirkannya kepada pembina menggunakan alias.<span>new FusionCharts({ </span> <span>"type": "column2d", </span> <span>"renderAt": "chart-container", </span> <span>"width": "550", </span> <span>"height": "400", </span> <span>"id": "revenue-chart", </span> <span>"dataFormat": "json", </span> <span>"dataSource": { </span> <span>"chart": { </span> <span>"yAxisName": "Revenue (In USD Billion)", </span> <span>"yAxisMaxValue": "200", </span> <span>... </span> <span>}, </span> <span>"data": [{ </span> <span>"label": "Amazon", </span> <span>"value": "88.99" </span> <span>}, { </span> <span>"label": "Apple", </span> <span>"value": "182.8" </span> <span>} </span> <span>... </span> <span>] </span> <span>} </span><span>}); </span>Kemudian, dalam pilihan konfigurasi yang kita lalui kepada pembina FusionCharts, kita boleh lakukan:chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({ </span> <span>selector: 'angular-chart', </span> <span>templateUrl: 'chart.html' </span><span>}).<span>Class</span>({ </span> <span>... </span><span>}); </span>mengemas kini data carta pada togol
kami juga mahu carta itu dikemas kini dengan data untuk 2015 apabila seseorang mengklik butang2015 dan bertukar kembali untuk menunjukkan data untuk 2014, apabila butang
. Mari tambahkan dua butang, yang akan digunakan untuk melakukan tindakan ini dan memberi mereka gaya. Pindahan templat komponen seperti berikut:
Perhatikan sintaks baru untuk menambahkan pendengar acara dan menambah Arahan NGClass dalam Angular 2. Mereka hampir sama dengan Angular 1, tanpa sebarang pendakap dan kurungan.Saya telah menambah arahan NGClass untuk menyerlahkan tahun yang dipilih semasa dengan menggunakan kelas CSS yang dipilih ke elemen butang. Ini berdasarkan harta yang dipilih pada komponen yang akan dikemas kini pada klik butang.
Kami boleh menetapkan tahun yang dipilih semasa hingga 2014 apabila komponen membuat dengan menambahkan baris berikut ke bahagian atas pembina:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><meta</span> charset<span>="UTF-8"</span>></span> </span> <span><span><span><title</span>></span>Angular 2 FusionCharts Demo<span><span></title</span>></span> </span> <span><!-- 1. Load custom CSS & fonts--> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span> </span> <span><span><span><link</span> href<span>='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300'</span> rel<span>='stylesheet'</span>></span> </span> <span><!-- 2. Load Angular 2 specific libraries --> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</span>></span><span><span></script</span>></span> </span> <span><!-- 3. Load FusionCharts library--> </span> <span><span><span><script</span> src<span>="https://static.fusioncharts.com/code/latest/fusioncharts.js"</span>></span><span><span></script</span>></span> </span> <span><!-- 4. Load component --> </span> <span><span><span><script</span> src<span>='main.js'</span>></span><span><span></script</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><!-- 5. Display the application --> </span> <span><span><span><angular-chart</span>></span>Loading...<span><span></angular-chart</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>logik untuk mengendalikan klik butang akan ditambah ke fungsi tahun baru.
<span>(function(chartApp){ </span> chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({ </span> <span>selector: 'angular-chart', </span> <span>template: '<div>Chart will render here</div>' </span> <span>}).<span>Class</span>({ </span> <span>constructor: function(){} </span> <span>}); </span> <span>document.addEventListener('DOMContentLoaded', function() { </span> ng<span>.platform.browser.bootstrap(chartApp.<span>AppComponent</span>); </span> <span>}); </span><span>})(window.chartApp || (window.chartApp = {})); </span>Untuk ini kita akan menggunakan kaedah setchartData FusionChart yang memerlukan kedua -dua pilihan konfigurasi carta dan data carta sebenar. Daripada menyimpan atribut carta terlebih dahulu dan kemudian merujuknya, kami akan mendapat atribut carta dari carta yang sudah diberikan, menggunakan kaedah GetChartData dan mengubah suai data itu dengan data khusus tahun.
<span>new FusionCharts({ </span> <span>"type": "column2d", </span> <span>"renderAt": "chart-container", </span> <span>"width": "550", </span> <span>"height": "400", </span> <span>"id": "revenue-chart", </span> <span>"dataFormat": "json", </span> <span>"dataSource": { </span> <span>"chart": { </span> <span>"yAxisName": "Revenue (In USD Billion)", </span> <span>"yAxisMaxValue": "200", </span> <span>... </span> <span>}, </span> <span>"data": [{ </span> <span>"label": "Amazon", </span> <span>"value": "88.99" </span> <span>}, { </span> <span>"label": "Apple", </span> <span>"value": "182.8" </span> <span>} </span> <span>... </span> <span>] </span> <span>} </span><span>}); </span>Selepas menambah butang HTML untuk butang dan pengendali klik di atas untuk butang tersebut, mengklik pada butang tersebut harus memuatkan data tahun itu untuk carta.
Demo
Dan inilah demo akhir.
Anda boleh melihat kod untuk demo ini di Plunker. Atau anda boleh memuat turun kod dari repo github kami.
Jika anda mengklik ke plunker, anda akan melihat bahawa kami telah menentukan harta dataset dalam fail config.json secara langsung. Ini menjadikan perkara -perkara yang lebih sedikit dalam komponen kami.
kesimpulan dan langkah seterusnya
kami bermula dengan membina carta sudut mudah, dan kemudian menambah lebih banyak fungsi untuk menggunakan anotasi dan API FusionCharts yang lain. Tetapi ini hanya hujung gunung es dan banyak lagi yang boleh dilakukan menggunakan kedua -dua Angular 2 dan FusionCharts. Beberapa perkara yang boleh anda pelajari sendiri:
-
Termasuk lebih banyak carta: carta lajur tidak selalu cara terbaik untuk mewakili dataset. Bergantung pada kes penggunaan anda, anda mungkin mahu menggunakan carta yang berbeza seperti air terjun, radar, tolok dan lain -lain. Oleh itu, cuba gunakan proses yang dijelaskan dalam tutorial ini untuk merancang carta yang berbeza dan lihat jika anda dapat melakukannya dengan jayanya. >
Sertakan carta dalam aplikasi anda: jika anda membuat aplikasi mudah alih hibrid, maka anda harus sedar bahawa ionik 2 (versi terkini ionik) didasarkan pada sudut 2. Dan itu berita baik kerana anda boleh menggunakan Tutorial ini sebagai asas untuk membuat carta untuk aplikasi ionik anda juga. -
Terokai lebih banyak peristiwa: Dalam tutorial ini, saya menjelaskan cara menggunakan kaedah setchartData, tetapi terdapat lebih banyak peristiwa dan kaedah yang boleh anda gunakan untuk meningkatkan pengalaman pengguna aplikasi anda. Semak halaman yang dipautkan di atas untuk mengetahui lebih lanjut mengenai pelbagai peristiwa dan kaedah yang ditawarkan oleh FusionCharts.
Jika anda menghadapi sebarang kesukaran semasa cuba membuat carta sendiri, sila rujuk dokumentasi Angular atau FusionCharts (bergantung kepada isu), atau tinggalkan komen di bawah. Saya akan lebih senang membantu!
soalan yang sering ditanya mengenai komponen carta dalam angular2 fusioncharts
Bagaimana saya memasang fusioncharts dalam angular2?
Untuk memasang FusionCharts dalam Angular2, anda perlu terlebih dahulu memasang FusionCharts dan FusionCharts sudut melalui NPM. Gunakan arahan berikut di terminal anda:
NPM Pasang FusionCharts
NPM Pasang Angular-FusionCharts
selepas pemasangan, import fusioncharts dan fusioncharts sudut ke dalam fail komponen anda. Kemudian, tambah FusionChartSmodule ke array import ngmodule anda. Selepas memasang fusioncharts dan fusioncharts sudut melalui npm, anda boleh mengimportnya ke dalam projek CLI sudut anda. Ingatlah untuk menambah FusionChartSmodule ke array import ngmodule anda. komponen. Ini termasuk jenis carta, sumber data, dan pilihan lain. Kemudian, gunakan komponen FusionCharts dalam templat anda untuk menjadikan carta. Anda boleh menyesuaikan carta dengan mengubah suai konfigurasi carta.Jenis carta apa yang boleh saya buat dengan fusioncharts dalam angular2? , kawasan, donat, dan banyak lagi. Anda juga boleh membuat carta canggih seperti carta gabungan, carta zoomline, dan treemaps. Setiap jenis carta mempunyai pilihan konfigurasi sendiri, yang boleh disesuaikan sesuai dengan keperluan anda. Perlu mengubahsuai sumber data dalam konfigurasi carta anda. FusionCharts secara automatik akan mengemas kini carta apabila sumber data berubah. Anda juga boleh menggunakan kaedah setjsondata atau setchartData untuk mengemas kini data secara pemrograman. Anda boleh mengimport fusioncharts dan fusioncharts sudut ke dalam fail typescript anda dan menggunakannya seperti yang anda lakukan dalam fail JavaScript biasa. Peristiwa yang boleh anda dengar, seperti DataPlotClick, ChartClick, dan Borerender. Untuk mengendalikan peristiwa ini, anda perlu menentukan pengendali acara dalam komponen anda dan mengikatnya ke komponen FusionCharts dalam templat anda. FusionCharts menyediakan pelbagai pilihan penyesuaian. Anda boleh menyesuaikan warna, fon, sempadan, latar belakang, dan banyak lagi. Pilihan ini boleh ditetapkan dalam konfigurasi carta.
Bagaimana saya mengeksport carta FusionCharts saya?
FusionCharts menyediakan fungsi eksport terbina dalam. Anda boleh mengeksport carta anda sebagai imej, PDF, atau SVG. Untuk mengaktifkan eksport, anda perlu menetapkan pilihan yang dieksportasi untuk benar dalam konfigurasi carta anda. proses rendering carta. Untuk membolehkan mod debug, tetapkan pilihan Debugmode untuk benar dalam konfigurasi carta anda. Anda kemudian boleh melihat log di konsol penyemak imbas anda.
Atas ialah kandungan terperinci Membina komponen carta dengan Angular 2 dan FusionCharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Bagaimana membuat permintaan HTTP di node.js?
Jul 13, 2025 am 02:18 AM
Terdapat tiga cara biasa untuk memulakan permintaan HTTP dalam node.js: Gunakan modul terbina dalam, axios, dan nod-fetch. 1. Gunakan modul HTTP/HTTPS terbina dalam tanpa kebergantungan, yang sesuai untuk senario asas, tetapi memerlukan pemprosesan manual jahitan data dan pemantauan ralat, seperti menggunakan https.get () untuk mendapatkan data atau menghantar permintaan pos melalui .write (); 2.AXIOS adalah perpustakaan pihak ketiga berdasarkan janji. Ia mempunyai sintaks ringkas dan fungsi yang kuat, menyokong async/menunggu, penukaran JSON automatik, pemintas, dan lain -lain. Adalah disyorkan untuk memudahkan operasi permintaan tak segerak; 3.Node-Fetch menyediakan gaya yang serupa dengan pengambilan penyemak imbas, berdasarkan janji dan sintaks mudah
Jenis Data JavaScript: Rujukan primitif vs
Jul 13, 2025 am 02:43 AM
Jenis data JavaScript dibahagikan kepada jenis primitif dan jenis rujukan. Jenis primitif termasuk rentetan, nombor, boolean, null, undefined, dan simbol. Nilai -nilai tidak berubah dan salinan disalin apabila memberikan nilai, jadi mereka tidak mempengaruhi satu sama lain; Jenis rujukan seperti objek, tatasusunan dan fungsi menyimpan alamat memori, dan pembolehubah menunjuk objek yang sama akan mempengaruhi satu sama lain. Typeof dan Instanceof boleh digunakan untuk menentukan jenis, tetapi memberi perhatian kepada isu -isu sejarah TypeOfNull. Memahami kedua -dua jenis perbezaan ini dapat membantu menulis kod yang lebih stabil dan boleh dipercayai.
React vs angular vs vue: Rangka kerja JS mana yang terbaik?
Jul 05, 2025 am 02:24 AM
Rangka kerja JavaScript mana yang terbaik? Jawapannya ialah memilih yang paling sesuai mengikut keperluan anda. 1. REACT adalah fleksibel dan bebas, sesuai untuk projek sederhana dan besar yang memerlukan penyesuaian tinggi dan keupayaan seni bina pasukan; 2. Angular menyediakan penyelesaian lengkap, sesuai untuk aplikasi peringkat perusahaan dan penyelenggaraan jangka panjang; 3. Vue mudah digunakan, sesuai untuk projek kecil dan sederhana atau perkembangan pesat. Di samping itu, sama ada terdapat timbunan teknologi sedia ada, saiz pasukan, kitaran hayat projek dan sama ada SSR diperlukan juga faktor penting dalam memilih rangka kerja. Singkatnya, tidak ada kerangka terbaik, pilihan terbaik adalah yang sesuai dengan keperluan anda.
Objek Masa JavaScript, seseorang membina eactexe, laman web lebih cepat di Google Chrome, dll.
Jul 08, 2025 pm 02:27 PM
Helo, pemaju JavaScript! Selamat datang ke berita JavaScript minggu ini! Minggu ini kami akan memberi tumpuan kepada: Pertikaian tanda dagangan Oracle dengan Deno, objek masa JavaScript baru disokong oleh pelayar, kemas kini Google Chrome, dan beberapa alat pemaju yang kuat. Mari mulakan! Pertikaian tanda dagangan Oracle dengan percubaan Deno Oracle untuk mendaftarkan tanda dagangan "JavaScript" telah menyebabkan kontroversi. Ryan Dahl, pencipta Node.js dan Deno, telah memfailkan petisyen untuk membatalkan tanda dagangan, dan dia percaya bahawa JavaScript adalah standard terbuka dan tidak boleh digunakan oleh Oracle
Apakah API cache dan bagaimana ia digunakan dengan pekerja perkhidmatan?
Jul 08, 2025 am 02:43 AM
CACHEAPI adalah alat yang disediakan oleh penyemak imbas kepada permintaan rangkaian cache, yang sering digunakan bersempena dengan ServiceWorker untuk meningkatkan prestasi laman web dan pengalaman luar talian. 1. Ia membolehkan pemaju menyimpan sumber secara manual seperti skrip, helaian gaya, gambar, dan lain -lain; 2. Ia boleh memadankan tindak balas cache mengikut permintaan; 3. Ia menyokong memotong cache tertentu atau membersihkan seluruh cache; 4. Ia boleh melaksanakan keutamaan cache atau strategi keutamaan rangkaian melalui perkhidmatan pekerja yang mendengar acara mengambil; 5. Ia sering digunakan untuk sokongan luar talian, mempercepat kelajuan akses berulang, sumber utama dan kandungan kemas kini latar belakang; 6. Apabila menggunakannya, anda perlu memberi perhatian kepada kawalan versi cache, sekatan penyimpanan dan perbezaan dari mekanisme caching HTTP.
Mengendalikan Janji: Chaining, Pengendalian Kesalahan, dan Janji Gabungan di JavaScript
Jul 08, 2025 am 02:40 AM
Janji adalah mekanisme teras untuk mengendalikan operasi tak segerak dalam JavaScript. Memahami panggilan rantaian, pengendalian ralat dan gabungan adalah kunci untuk menguasai aplikasi mereka. 1. Panggilan rantai mengembalikan janji baru melalui .then () untuk merealisasikan persamaan proses tak segerak. Setiap .then () menerima hasil sebelumnya dan boleh mengembalikan nilai atau janji; 2. Pengendalian ralat harus menggunakan .catch () untuk menangkap pengecualian untuk mengelakkan kegagalan senyap, dan boleh mengembalikan nilai lalai dalam tangkapan untuk meneruskan proses; 3. Gabungan seperti janji.all () (berjaya hanya berjaya selepas semua kejayaan), janji.race () (penyempurnaan pertama dikembalikan) dan janji.allsettled () (menunggu semua penyelesaian)
Memanfaatkan array.prototype Kaedah untuk manipulasi data dalam javascript
Jul 06, 2025 am 02:36 AM
Kaedah terbina dalam JavaScript seperti .map (), .filter () dan .reduce () dapat memudahkan pemprosesan data; 1) .map () digunakan untuk menukar elemen satu hingga satu untuk menghasilkan tatasusunan baru; 2) .filter () digunakan untuk menapis elemen mengikut keadaan; 3) .reduce () digunakan untuk mengagregatkan data sebagai nilai tunggal; Penyalahgunaan harus dielakkan apabila digunakan, mengakibatkan kesan sampingan atau masalah prestasi.
JS Roundup: menyelam jauh ke dalam gelung acara JavaScript
Jul 08, 2025 am 02:24 AM
Gelung acara JavaScript menguruskan operasi tak segerak dengan menyelaraskan susunan panggilan, webapis, dan barisan tugas. 1. Stack panggilan melaksanakan kod segerak, dan ketika menghadapi tugas -tugas yang tidak segerak, ia diserahkan kepada Webapi untuk diproses; 2. Selepas Webapi melengkapkan tugas di latar belakang, ia meletakkan panggil balik ke dalam barisan yang sama (tugas makro atau tugas mikro); 3. Loop acara memeriksa sama ada timbunan panggilan kosong. Jika ia kosong, panggilan balik diambil dari barisan dan ditolak ke dalam tumpukan panggilan untuk pelaksanaan; 4. Tugas -tugas mikro (seperti janji. 5. Memahami gelung acara membantu mengelakkan menyekat benang utama dan mengoptimumkan pesanan pelaksanaan kod.
