Membina komponen carta dengan Angular 2 dan FusionCharts-tutorial js-php.cn

Jadual Kandungan

sudut 2 vs sudut 1.x

persediaan

Membuat komponen carta

Membuat carta

Untuk menambah logo syarikat ke paksi-x, kami akan menggunakan salah satu ciri kuat FusionCharts-

Toggling antara dataset

Penstrukturan data.

Demo

kesimpulan dan langkah seterusnya

soalan yang sering ditanya mengenai komponen carta dalam angular2 fusioncharts

Bagaimana saya memasang fusioncharts dalam angular2?

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?

Rumah

hujung hadapan web

tutorial js

Membina komponen carta dengan Angular 2 dan FusionCharts

Joseph Gordon-Levitt

Feb 17, 2025 pm 12:51 PM

Membina komponen carta dengan Angular 2 dan FusionCharts

Takeaways Key

Artikel ini dikaji semula oleh Vildan Softic. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint yang terbaik boleh!

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Angular 2 FusionCharts Demo</title>  <link rel="stylesheet" href="styles.css"> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet'>  <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"></script>  <script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>  <script src='main.js'></script> </head> <body>  <angular-chart>Loading...</angular-chart> </body> </html> 
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

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.

(function(chartApp){ chartApp.AppComponent = ng.core.Component({ selector: 'angular-chart', template: '<div>Chart will render here</div>' }).Class({ constructor: function(){} }); document.addEventListener('DOMContentLoaded', function() { ng.platform.browser.bootstrap(chartApp.AppComponent); }); })(window.chartApp || (window.chartApp = {})); 
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Sama ada cara, inilah yang kelihatan seperti templat kita.

new FusionCharts({ "type": "column2d", "renderAt": "chart-container", "width": "550", "height": "400", "id": "revenue-chart", "dataFormat": "json", "dataSource": { "chart": { "yAxisName": "Revenue (In USD Billion)", "yAxisMaxValue": "200", ... }, "data": [{ "label": "Amazon", "value": "88.99" }, { "label": "Apple", "value": "182.8" } ... ] } }); 
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

inilah demo dari apa yang kita ada setakat ini:
Memuatkan Plunk ...
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.AppComponent = ng.core.Component({ selector: 'angular-chart', templateUrl: 'chart.html' }).Class({ ... }); 
Salin selepas log masuk
Salin selepas log masuk

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:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Angular 2 FusionCharts Demo</title>  <link rel="stylesheet" href="styles.css"> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet'>  <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"></script>  <script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>  <script src='main.js'></script> </head> <body>  <angular-chart>Loading...</angular-chart> </body> </html> 
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

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.

(function(chartApp){ chartApp.AppComponent = ng.core.Component({ selector: 'angular-chart', template: '<div>Chart will render here</div>' }).Class({ constructor: function(){} }); document.addEventListener('DOMContentLoaded', function() { ng.platform.browser.bootstrap(chartApp.AppComponent); }); })(window.chartApp || (window.chartApp = {})); 
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Satu cara mengendalikan pelbagai dataset adalah untuk menentukan objek dataset di bahagian atas fungsi pembina kami dan melampirkannya kepada pembina menggunakan alias.

new FusionCharts({ "type": "column2d", "renderAt": "chart-container", "width": "550", "height": "400", "id": "revenue-chart", "dataFormat": "json", "dataSource": { "chart": { "yAxisName": "Revenue (In USD Billion)", "yAxisMaxValue": "200", ... }, "data": [{ "label": "Amazon", "value": "88.99" }, { "label": "Apple", "value": "182.8" } ... ] } }); 
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Kemudian, dalam pilihan konfigurasi yang kita lalui kepada pembina FusionCharts, kita boleh lakukan:

chartApp.AppComponent = ng.core.Component({ selector: 'angular-chart', templateUrl: 'chart.html' }).Class({ ... }); 
Salin selepas log masuk
Salin selepas log masuk
mengemas kini data carta pada togol

kami juga mahu carta itu dikemas kini dengan data untuk 2015 apabila seseorang mengklik butang
2015 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:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Angular 2 FusionCharts Demo</title>  <link rel="stylesheet" href="styles.css"> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet'>  <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"></script>  <script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>  <script src='main.js'></script> </head> <body>  <angular-chart>Loading...</angular-chart> </body> </html> 
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

logik untuk mengendalikan klik butang akan ditambah ke fungsi tahun baru.

(function(chartApp){ chartApp.AppComponent = ng.core.Component({ selector: 'angular-chart', template: '<div>Chart will render here</div>' }).Class({ constructor: function(){} }); document.addEventListener('DOMContentLoaded', function() { ng.platform.browser.bootstrap(chartApp.AppComponent); }); })(window.chartApp || (window.chartApp = {})); 
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

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.

new FusionCharts({ "type": "column2d", "renderAt": "chart-container", "width": "550", "height": "400", "id": "revenue-chart", "dataFormat": "json", "dataSource": { "chart": { "yAxisName": "Revenue (In USD Billion)", "yAxisMaxValue": "200", ... }, "data": [{ "label": "Amazon", "value": "88.99" }, { "label": "Apple", "value": "182.8" } ... ] } }); 
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

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.
Memuatkan Plunk ...
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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

4 minggu yang lalu By DDD

Bagaimana untuk memperbaiki KB5055523 gagal dipasang di Windows 11?

3 minggu yang lalu By DDD

Bagaimana untuk memperbaiki KB5055518 gagal dipasang di Windows 10?

3 minggu yang lalu By DDD

Tahap kekuatan untuk setiap musuh & raksasa di R.E.P.O.

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Putera Biru: Cara sampai ke ruangan bawah tanah

3 minggu yang lalu By DDD

Tunjukkan Lagi

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)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7923

Tutorial Java

1652

Tutorial CakePHP

1411

Tutorial Laravel

1303

Tutorial PHP

1249

Tunjukkan Lagi

Related knowledge

Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan? Apr 04, 2025 pm 02:42 PM

Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...

Demystifying JavaScript: Apa yang berlaku dan mengapa penting Apr 09, 2025 am 12:07 AM

JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.

Siapa yang dibayar lebih banyak Python atau JavaScript? Apr 04, 2025 am 12:09 AM

Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.

Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido? atau: Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido? Apr 04, 2025 pm 05:36 PM

Perbincangan mengenai realisasi kesan animasi tatal dan elemen Parallax dalam artikel ini akan meneroka bagaimana untuk mencapai yang serupa dengan laman web rasmi Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ... ...

Evolusi JavaScript: Trend Semasa dan Prospek Masa Depan Apr 10, 2025 am 09:33 AM

Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.

Adakah JavaScript sukar belajar? Apr 03, 2025 am 12:20 AM

Pembelajaran JavaScript tidak sukar, tetapi ia mencabar. 1) Memahami konsep asas seperti pembolehubah, jenis data, fungsi, dan sebagainya. 2) Pengaturcaraan asynchronous tuan dan melaksanakannya melalui gelung acara. 3) Gunakan operasi DOM dan berjanji untuk mengendalikan permintaan tak segerak. 4) Elakkan kesilapan biasa dan gunakan teknik debugging. 5) Mengoptimumkan prestasi dan mengikuti amalan terbaik.

Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript? Apr 04, 2025 pm 05:09 PM

Bagaimana cara menggabungkan elemen array dengan ID yang sama ke dalam satu objek dalam JavaScript? Semasa memproses data, kita sering menghadapi keperluan untuk mempunyai id yang sama ...

Bagaimana untuk melaksanakan fungsi seretan panel dan drop pelarasan yang serupa dengan vscode dalam pembangunan front-end? Apr 04, 2025 pm 02:06 PM

Terokai pelaksanaan fungsi seretan panel dan drop panel seperti VSCode di bahagian depan. Dalam pembangunan front-end, bagaimana untuk melaksanakan vscode seperti ...

See all articles