Membina komponen carta dengan Angular 2 dan FusionCharts

Takeaways Key

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.

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>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title>></title></span>Angular 2 FusionCharts Demo<span><span></span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link> 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> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script> src<span >="https://static.fusioncharts.com/code/latest/fusioncharts.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script> src<span >='main.js'</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart>></angular-chart></span>Loading...<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span></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>
  </span><span><span><span> lang<span>="en"</span>></span>
  </span>  <span><span><span>></span>
  </span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
  </span>    <span><span><span><title>></title></span>Angular 2 FusionCharts Demo<span><span></span>></span>
  </span>
      <span><!-- 1. Load custom CSS & fonts-->
  </span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
  </span>    <span><span><span><link> 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> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</script></span>></span><span><span></span>></span>
  </span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</script></span>></span><span><span></span>></span>
  </span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</script></span>></span><span><span></span>></span>
  </span>
      <span><!-- 3. Load FusionCharts library-->
  </span>    <span><span><span><script> src<span >="https://static.fusioncharts.com/code/latest/fusioncharts.js"</script></span>></span><span><span></span>></span>
  </span>
      <span><!-- 4. Load component -->
  </span>    <span><span><span><script> src<span >='main.js'</script></span>></span><span><span></span>></span>
  </span>  <span><span><span></span>></span>
  </span>  <span><span><span>></span>
  </span>
      <span><!-- 5. Display the application -->
  </span>    <span><span><span><angular-chart>></angular-chart></span>Loading...<span><span></span>></span>
  </span>  <span><span><span></span>></span>
  </span><span><span><span></span>></span>
  </span></span></span></span></span></span></span></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>
  </span><span><span><span> lang<span>="en"</span>></span>
  </span>  <span><span><span>></span>
  </span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
  </span>    <span><span><span><title>></title></span>Angular 2 FusionCharts Demo<span><span></span>></span>
  </span>
      <span><!-- 1. Load custom CSS & fonts-->
  </span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
  </span>    <span><span><span><link> 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> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</script></span>></span><span><span></span>></span>
  </span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</script></span>></span><span><span></span>></span>
  </span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</script></span>></span><span><span></span>></span>
  </span>
      <span><!-- 3. Load FusionCharts library-->
  </span>    <span><span><span><script> src<span >="https://static.fusioncharts.com/code/latest/fusioncharts.js"</script></span>></span><span><span></span>></span>
  </span>
      <span><!-- 4. Load component -->
  </span>    <span><span><span><script> src<span >='main.js'</script></span>></span><span><span></span>></span>
  </span>  <span><span><span></span>></span>
  </span>  <span><span><span>></span>
  </span>
      <span><!-- 5. Display the application -->
  </span>    <span><span><span><angular-chart>></angular-chart></span>Loading...<span><span></span>></span>
  </span>  <span><span><span></span>></span>
  </span><span><span><span></span>></span>
  </span></span></span></span></span></span></span></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 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:

  <span><span>
  </span><span><span><span> lang<span>="en"</span>></span>
  </span>  <span><span><span>></span>
  </span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
  </span>    <span><span><span><title>></title></span>Angular 2 FusionCharts Demo<span><span></span>></span>
  </span>
      <span><!-- 1. Load custom CSS & fonts-->
  </span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
  </span>    <span><span><span><link> 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> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</script></span>></span><span><span></span>></span>
  </span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</script></span>></span><span><span></span>></span>
  </span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</script></span>></span><span><span></span>></span>
  </span>
      <span><!-- 3. Load FusionCharts library-->
  </span>    <span><span><span><script> src<span >="https://static.fusioncharts.com/code/latest/fusioncharts.js"</script></span>></span><span><span></span>></span>
  </span>
      <span><!-- 4. Load component -->
  </span>    <span><span><span><script> src<span >='main.js'</script></span>></span><span><span></span>></span>
  </span>  <span><span><span></span>></span>
  </span>  <span><span><span>></span>
  </span>
      <span><!-- 5. Display the application -->
  </span>    <span><span><span><angular-chart>></angular-chart></span>Loading...<span><span></span>></span>
  </span>  <span><span><span></span>></span>
  </span><span><span><span></span>></span>
  </span></span></span></span></span></span></span></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!