Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Kode contoh pembuatan diagram reaksi


Kode contoh pembuatan diagram reaksi


Berikut beberapa contoh pustaka React charting beserta fitur dan contohnya masing-masing:

1. Bereaksi Chartjs 2

- Fitur: Berbagai jenis bagan seperti garis, batang, pai, dan lainnya.
- Contoh:
- Bagan Batang Vertikal
- Bagan Batang Horisontal
- Bagan Batang Bertumpuk
- Bagan Batang yang Dikelompokkan
- Bagan Area
- Bagan Garis
- Bagan Garis Multisumbu
- Diagram Lingkaran
- Bagan Donat
- Bagan Area Kutub
- Bagan Radar
- Bagan Sebar
- Bagan Gelembung
- Bagan Multitipe
- Bagan Acara
- Referensi Bagan
- Bagan Gradien

2. Bereaksi Google Charts

- Fitur: Berbagai jenis bagan seperti area, batang, gelembung, dan lainnya.
- Contoh:
- Bagan Area
- Bagan Batang
- Bagan Gelembung
- Kalender
- Bagan Lilin
- Bagan Kolom
- Bagan Kombo
- Gantt
- Mengukur
- Bagan Geografis
- Histogram
- Bagan Garis
- Bagan Organisasi
- Diagram Lingkaran
- Sankey
- Bagan Sebar
- Bagan Area Bertingkat
- Meja
- Garis Waktu
- Peta Pohon
- Pohon Kata
- Animasi
- Editor Bagan
- Kontrol
- Interaksi
- Tata Letak
- Lembar Bentang
- Bilah Alat

3. ApexCharts.js

- Fitur: Berbagai jenis bagan seperti garis, kolom, batang, lingkaran, dan lainnya.
- Contoh: Menyertakan kode sumber untuk semua contoh guna menghemat waktu pengembangan.

4. KanvasJS

- Fitur: Bagan interaktif dan responsif dengan animasi, pembesaran, penggeseran, peristiwa, ekspor, penelusuran, dan pembaruan waktu nyata.
- Contoh:
- Bagan Garis
- Bagan Spline dan Garis Langkah
- Grafik Area
- Area Spline, Area Bertumpuk, Area Bertumpuk 100, Area Langkah, Area Rentang, dan Grafik Area Rentang Spline
- Bagan Kolom
- Diagram Batang
- Kolom Bertumpuk, Kolom Bertumpuk 100%, Kolom Rentang, Bar Bertumpuk, Bar Bertumpuk 100%, Bar Range, dan Bagan Air Terjun
- Diagram Lingkaran
- Bagan Donat / Donat
- Bagan Corong dan Piramida
- Grafik Candlestick dan OHLC
- Bagan Sebar dan Gelembung
- Bagan Kotak dan Kumis
- Bagan Garis Kesalahan dan Kesalahan
- Grafik Dinamis
- Grafik Saham dengan Range Selector, Navigator, dan Multiple Charts

5. TanStack/react-chart

- Fitur: Berbagai jenis bagan seperti garis, batang, gelembung, dan lainnya.
- Contoh: Termasuk contoh untuk sederhana, garis, batang, gelembung, area, gaya khusus, keterangan alat khusus, opsi sumbu, mode gelap, kilauan, penyikatan, mode pengelompokan, opsi keterangan alat, dan banyak lagi.

Pustaka ini menyediakan banyak contoh dan templat untuk membantu Anda memulai membuat bagan di aplikasi React Anda. Anda dapat memilih salah satu yang paling sesuai dengan kebutuhan Anda berdasarkan jenis bagan yang ingin Anda buat dan tingkat penyesuaian yang Anda perlukan[1][2][3][4][5].

Kutipan:
[1] https://react-chartjs-2.js.org/examples/
[2] https://www.react-google-charts.com/examples
[3] https://apexcharts.com/react-chart-demos/
[4] https://canvasjs.com/react-charts/
[5] https://codesandbox.io/examples/package/react-charts