Unduh ng2 charts - Unduh Kode Sumber ng2 charts

ng2 charts

Kode sumber lainnya

v6.0.1

Unduh

NG2-charts slack

Bagan indah untuk Angular berdasarkan Chart.js

Penggunaan & Demo

Sampel menggunakan ng2-charts

https://valor-software.com/ng2-charts/

Instalasi

Anda dapat menginstal NG2-chart dengan menggunakan sudut CLI:

ng add ng2-charts

Paket yang diperlukan akan diinstal secara otomatis, dan app.config.ts Anda akan diperbarui dengan perubahan yang diperlukan untuk mulai menggunakan perpustakaan segera.

Instal manual melalui manajer paket

Anda dapat menginstal NG2-chart menggunakan NPM:
```
npm install ng2-charts --save
```
atau benang:
```
yarn add ng2-charts --save
```
Anda juga perlu menginstal dan menyertakan pustaka Chart.js dalam aplikasi Anda (ini adalah ketergantungan rekan dari perpustakaan ini, info lebih lanjut dapat ditemukan dalam dokumentasi chart.js resmi.js)
```
npm install chart.js --save
```
atau dengan benang:
```
yarn add  chart.js --save
```

Impor Petunjuk di komponen mandiri Anda:

 import { BaseChartDirective } from 'ng2-charts' ;

@ Component ( {
  standalone : true ,
  imports : [ BaseChartDirective ] ,
} )
export class MyComponent { }

Berikan konfigurasi, biasanya di main.ts Anda:

 import { provideCharts , withDefaultRegisterables } from 'ng2-charts' ;

bootstrapApplication ( AppComponent , {
  providers : [ provideCharts ( withDefaultRegisterables ( ) ) ] ,
} ) . catch ( ( err ) => console . error ( err ) ) ;

Atau, sertakan konfigurasi minimal untuk mengurangi ukuran bundel, misalnya:

 provideCharts ( { registerables : [ BarController , Legend , Colors ] } ) ;

Atau di AppModule Anda:

 import { provideCharts , withDefaultRegisterables } from 'ng2-charts' ;

@ NgModule ( {
  providers : [ provideCharts ( withDefaultRegisterables ( ) ) ] ,
  bootstrap : [ AppComponent ] ,
} )
export class AppModule { }

Tabel Kompatibilitas Versi Angular

	Versi NG2-Chart
Versi sudut	v1.x	v2.x	v3.x	v4.x	v5.x	v6.x
2 - 9	✓
10		✓
11		✓
12		✓
13			✓
14			✓	✓
15			✓	✓
16					✓
17					✓	✓

API

Jenis bagan

Ada satu arahan untuk semua jenis grafik: baseChart , dan ada 8 jenis grafik: line , bar , radar , pie , polarArea , doughnut , bubble dan scatter . Anda dapat menggunakan arahan pada elemen canvas sebagai berikut:

 < canvas baseChart [data] =" barChartData " [options] =" barChartOptions " [type] =" 'bar' " > </ canvas >

Properti

CATATAN : Untuk informasi lebih lanjut tentang opsi yang mungkin, silakan merujuk ke dokumentasi Chart.js asli

type : ( ChartType ) - Menunjukkan jenis grafik, itu bisa: line , bar , radar , pie , polarArea , doughnut atau jenis kustom yang ditambahkan ke chart.js
data : ( ChartData<TType, TData, TLabel> ) - Seluruh struktur data yang akan diterjemahkan dalam bagan. Dukung berbagai format fleksibel dan opsi parsing, lihat di sini. Sebagai alternatif, dan tergantung pada type bagan Anda, Anda dapat menggunakan properti labels dan datasets untuk menentukan opsi individual.
labels : ( TLabel[] ) - Label Datasets. Ini diperlukan untuk grafik: line , bar dan radar . Dan hanya label (di hover) untuk grafik: polarArea , pie dan doughnut . Label dicocokkan secara berurutan dengan array datasets .
datasets : ( ChartDataset<TType, TData>[] ) - Sama seperti properti datasets dari input data . Lihat di sini untuk detailnya.
options : ( ChartOptions<TType> ) - Opsi bagan (sesuai dokumentasi Chart.js).
legend : ( boolean = false ) - Jika benar, bagan legenda ditampilkan.

Acara

chartClick : Kebakaran saat klik pada grafik telah terjadi, mengembalikan informasi mengenai titik aktif dan label
chartHover : Kebakaran saat mousemove (hover) pada grafik telah terjadi, mengembalikan informasi mengenai titik aktif dan label

Warna

Secara default, perpustakaan ini menggunakan warna seperti yang ditentukan oleh chart.js. Jika Anda membutuhkan lebih banyak kontrol pada warna, misalnya: menghasilkan warna dengan cepat, lihat palet warna canggih.

Tema dinamis

ThemeService memungkinkan klien untuk mengatur struktur yang menentukan pengaturan warna. Layanan ini dapat dipanggil ketika tema dinamis berubah, dengan warna yang sesuai dengan tema. Struktur ditafsirkan sebagai override, dengan fungsionalitas khusus saat berhadapan dengan array. Contoh:

 type Theme = 'light-theme' | 'dark-theme' ;

private _selectedTheme: Theme = 'light-theme' ;
public get selectedTheme ( ) {
  return this . _selectedTheme ;
}

public set selectedTheme ( value ) {
  this . _selectedTheme = value ;
  let overrides : ChartOptions ;
  if ( this . selectedTheme === 'dark-theme' ) {
    overrides = {
      legend : {
        labels : { fontColor : 'white' }
      } ,
      scales : {
        xAxes : [ {
          ticks : { fontColor : 'white' } ,
          gridLines : { color : 'rgba(255,255,255,0.1)' }
        } ] ,
        yAxes : [ {
          ticks : { fontColor : 'white' } ,
          gridLines : { color : 'rgba(255,255,255,0.1)' }
        } ]
      }
    } ;
  } else {
    overrides = { } ;
  }
  this . themeService . setColorschemesOptions ( overrides ) ;
}

constructor ( private themeService : ThemeService < AppChartMetaConfig > ) {
}

setCurrentTheme ( theme : Theme ) {
  this . selectedTheme = theme ;
}

Objek overrides memiliki jenis yang sama dengan ChartOptions opsi opsi bagan, dan di mana pun bidang sederhana ditemui ia menggantikan bidang pencocokan di objek options . Ketika sebuah array ditemui (seperti pada bidang xAxes dan yAxes di atas), objek tunggal di dalam array digunakan sebagai templat untuk mengganti semua elemen array di bidang pencocokan di objek options . Jadi dalam kasus di atas, setiap sumbu akan memiliki kutu dan warna gridline berubah.

Pemecahan masalah

Harap ikuti pedoman ini saat melaporkan bug dan permintaan fitur:

Gunakan masalah GitHub untuk melaporkan bug dan permintaan fitur.
Harap selalu berikan contoh proyek dan tulis langkah -langkah untuk mereproduksi kesalahan. Dengan begitu kita dapat fokus untuk memperbaiki bug, tidak menggaruk -garuk kepala kita mencoba mereproduksi.

Terima kasih sudah mengerti!