Pustaka Bagan JavaScript: 13 Pilihan Populer

#1 – Bagan.js

Chart.js adalah pustaka bagan praktis yang menggunakan <canvas> HTML5 untuk merender bagan.

Pustaka dengan mudah menjadi pilihan utama untuk proyek sederhana, karena alasan seperti itu responsif secara default, dan Anda juga dapat menerapkan efek animasi berdasarkan perilaku pengguna.

Berikut adalah 8 jenis grafik yang dapat Anda buat dengan Chart.js:

• Bagan Area
• Grafik batang
• Bagan Gelembung
• Bagan Donat dan Pai
• Bagan Garis
• Jenis Bagan Campuran
• Bagan Area Kutub
• Bagan Radar

Sejauh kemudahan penggunaan, sintaksnya sederhana, dan bahkan jika Anda belum pernah bekerja dengan JavaScript sebelumnya, membuat bagan baru sangatlah mudah.

 const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

Jika Anda ingin memperluas bagan dengan fungsi dinamis dan pengumpulan data, pustaka memiliki sistem Plugin yang dapat Anda gunakan untuk menambahkan fungsionalitas baru.

Contoh Chart.js

Lihat Pen Proof of concept: Chart.js dengan Background Gradient oleh Sven (@hofmannsven) di CodePen.

Sumber Daya Tambahan Chart.js

• Chart.js + Next.js = Dasbor Berbasis Data yang Indah
• Memulai dengan Chart.js; Pembelajaran Berbasis Tugas

#2 – D3.js

Mari saya mulai dengan mengatakan bahwa D3 adalah alat visualisasi data daripada perpustakaan charting tradisional.

D3 memungkinkan Anda menentukan kumpulan data dan mengikatnya ke DOM, setelah itu Anda dapat menggunakan fungsi perpustakaan untuk mengubah data tersebut menjadi representasi visual yang unik. Untuk presentasi visual, D3 memanfaatkan tabel HTML, SVG, dan <canvas> untuk merender data pada halaman.

Jika Anda pernah melihat salah satu globe berputar berbasis geo dengan beberapa titik data interaktif di dalamnya, kemungkinan besar presentasi itu dibuat dengan D3. Namun, ini juga berfungsi dengan baik untuk penggunaan praktis, seperti bagan dasar yang dapat Anda lihat dalam demo di bawah ini. Pada akhirnya, Anda akan ingin merujuk ke bagian Tutorial resmi untuk D3 untuk mengeksplorasi kemampuannya yang lebih rumit.

Contoh D3.js

Lihat Bagan D3 Pena + ReactJS oleh Web Dev (@ronaldmarin) di CodePen.

Sumber Daya Tambahan D3.js

• tutorial D3.js
• Membuat Peta Panas Kalender D3.js

#3 – Apache ECcharts

Salah satu alasan mengapa Apache ECharts sangat populer adalah karena Anda mendapatkan akses ke ratusan contoh bagan yang sudah dibuat sebelumnya langsung dari kotak. Anda dapat memeriksanya sendiri dengan mengunjungi direktori Contoh. Halaman ini mencakup bagan dan contoh dalam kategori seperti garis, batang, diagram lingkaran, sebar, peta panas, grafik, dan banyak lagi.

Dan, setiap contoh memiliki contoh kode JavaScript dan TypeScript yang disertakan. Tapi bukan itu saja, ada beberapa manfaat nyata menggunakan perpustakaan ini. Berikut adalah beberapa di antaranya:

• Aliran data. Ingin membuat bagan interaktif dengan jutaan titik data? ECharts menggunakan WebSockets untuk mengalirkan data sehingga dapat dimuat secara asinkron bahkan dengan kumpulan data yang sangat besar.
• Ramah seluler. Saat pengguna melihat EChart di perangkat seluler mereka, bagan itu sendiri telah dioptimalkan untuk menyediakan fitur interaktif – zoom, panning, dan rendering SVG untuk memastikan pengiriman terbaik.
• Data Dinamis. Anda dapat memberi makan ECharts beberapa titik data (terpisah), dan perpustakaan akan secara otomatis menganimasikan bagan untuk memberikan pengalaman interaktif kepada pengguna.
• Aksesibilitas. Apache ECharts (v4.0 dan lebih tinggi) dibuat untuk mengikuti pedoman WAI-ARIA.

Anda juga dapat menampilkan grafik Anda di situs web Anda menggunakan CDN eksternal.

Contoh Apache ECharts

Lihat Contoh Pen Apache Ecchart oleh Vale (@vsigno) di CodePen.

Apache ECharts Sumber Daya Tambahan

• Bangun Alat Wawasan GitHub yang Lebih Baik dalam Seminggu

#4 – Plot

Plotly adalah perusahaan induk Dash, solusi low-code untuk penyebaran aplikasi data. Dan mereka mengembangkan perpustakaan grafik mereka sendiri – Plotly – di tempat.

Dengan Plotly, Anda dapat membuat visualisasi bagan paling dasar, tetapi kekuatan perpustakaan yang sebenarnya terletak pada kemampuan untuk menghasilkan bagan berbasis statistik, representasi data 3D, dan bagan berdasarkan data keuangan.

Ini tersedia baik sebagai modul Node.js, tetapi juga dapat digunakan langsung dari CDN.

Contoh Plot

Lihat anotasi Tambahkan Pena pada acara klik dengan plotly (@plotly) di CodePen.

#5 – Frappe

Pustaka grafik Frappe dibuat oleh orang-orang yang membuat Kerangka Frappe. Perpustakaan ini sesederhana yang didapat. Dan kesederhanaan itu adalah faktor utama yang berkontribusi pada popularitas perpustakaan.

Pustaka tidak memerlukan ketergantungan eksternal dan dapat membuat bagan SVG yang ramah seluler hanya dalam beberapa baris kode. Berikut adalah contoh kode untuk bagan Sumbu dasar:

 data = { labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { values: [18, 40, 30, 35, 8, 52, 17, -4] } ] } new frappe.Chart( "#chart", { data: data, type: 'bar', height: 180, colors: ['red'] });

Dan cuplikan kecil ini akan diterjemahkan menjadi bagan seperti ini:

Ada juga dukungan untuk bagan campuran (beberapa bagan dalam satu), anotasi, peta panas, dan API tersedia jika Anda berencana memperbarui data secara real time, atau mengekspornya.

Contoh Frappe

Lihat Pen Frappe Hello World oleh Jang Rush (@weakish) di CodePen.

#6 – Bagan Puncak

ApexCharts adalah perpustakaan charting tradisional. Perbedaan utama antara ApexCharts dan Frappe (misalnya) adalah bahwa ApexCharts menyediakan sedikit lebih banyak demo. Tetapi, juga, menawarkan dukungan asli untuk kerangka kerja populer seperti React, Vue, dan Angular. Ini juga berarti bahwa semua grafik demo memiliki sampel masing-masing yang ditulis dalam sintaks kerangka kerja tersebut.

Untuk fitur, semua bagan dibuat dalam format SVG dan secara default ramah seluler. Anda juga dapat memanfaatkan fitur seperti animasi halus, dan anotasi, dan menyesuaikan palet tema bagan Anda dengan memilih salah satu dari 10 gaya sampel.

Contoh ApexCharts

Lihat Dasbor Pen Realtime dari ApexCharts (@apexcharts) di CodePen.

#7 – G2

Saya baru-baru ini berbicara tentang Ant Design pada beberapa kesempatan, termasuk dalam artikel saya tentang library komponen untuk React.js dan Vue. Ant tidak hanya sangat populer di GitHub, tetapi komunitas menyukainya di semua wilayah di dunia.

Dan pustaka grafik G2 (atau mereka menyebutnya "Tata Bahasa Visualisasi") adalah implementasi Ant Design dari sistem charting menggunakan Ant Design System. Saya sangat menyarankan untuk memeriksa beranda AntV, di mana Anda akan menemukan banyak perpustakaan lain yang berkaitan dengan visualisasi data waktu nyata.

Ini paling sering digunakan untuk membangun hal-hal seperti dasbor admin, membuat jalur data, dan membuat contoh visualisasi data interaktif menggunakan mesin renderingnya. Mesin ini dapat merender grafik dan vektor data melalui WebGL, Canvas, dan SVG. Dan karena pustaka ini dapat dipasang, Anda dapat lebih menyempurnakan presentasi bagan Anda melalui pustaka yang lebih kuat seperti D3.js (yang kita lihat sebelumnya).

#8 – kasarViz

Pustaka roughViz dari Jared Wilber adalah kombinasi dari 3 pustaka yang berbeda: D3.js, Rough.js, dan handy – pengolah sketsa yang digambar tangan. Seperti yang Anda ketahui dari contoh tangkapan layar di atas, ini bukan pustaka bagan khas Anda. roughViz dibangun seluruhnya dengan tujuan untuk membantu Anda membuat bagan bergaya sketsa yang digambar tangan menggunakan JavaScript.

Jenis perpustakaan ini akan menjadi tambahan yang bagus untuk proyek pribadi, dengan kata lain - proyek yang membutuhkan percikan yang lebih kreatif daripada pendekatan gaya profesional tradisional. Dan sintaksnya sendiri sesederhana mungkin, sangat mirip dengan Frappe dan ApexCharts.

Anda dapat melihatnya sendiri dalam demo di bawah ini.

kasarViz Contoh

Lihat Demo Pen RoughViz oleh Danny Englishby (@DanEnglishby) di CodePen.

#9 – Grafik Ringan

Jika Anda sedang mengerjakan proyek terkait keuangan (atau cryptocurrency dalam hal ini), cukup jelas bahwa banyak pustaka grafik yang disebutkan sebelumnya tidak akan memotongnya. Dengan demikian, inilah Bagan Ringan – pustaka bagan yang dibuat khusus untuk menampilkan bagan dan grafik berbasis keuangan.

Pustaka ini tidak hanya open-source dan ringan, tetapi juga mengemas semua fitur penting yang diperlukan untuk menampilkan data bagan tentang keuangan dan struktur dinamisnya.

Salah satu fitur tersebut adalah streaming data, yang memungkinkan Anda meneruskan data real-time ke kanvas Anda dan kemudian memperbaruinya tanpa pengguna perlu me-refresh halaman. Dan faktor lain yang mungkin Anda pertimbangkan adalah kinerja, yang seharusnya tidak menjadi masalah seperti yang dijelaskan di beranda perpustakaan ini,

“Solusi pembuatan bagan kami direkayasa sejak awal untuk bekerja dengan susunan data yang sangat besar. Grafik tetap responsif dan gesit bahkan dengan ribuan batang bahkan dengan pembaruan beberapa kali per detik dengan centang baru.”

Lihat demo di bawah ini untuk merasakannya, tetapi juga banyak opsi dan fitur bagan.

Contoh Grafik Ringan

Lihat bagan lanjutan Pen tradingview oleh truong (@truong160196) di CodePen.

Grafik Ringan Sumber Daya Tambahan

• Grafik keuangan untuk aplikasi Anda

#10 – Billboard

Billboard adalah perpustakaan bagan antarmuka berdasarkan D3. Ini memiliki semua fitur modern yang Anda harapkan – rendering SVG, dukungan sentuh untuk perangkat seluler, antarmuka yang sederhana, dan dokumentasi API yang hebat.

Namun, fitur favorit saya, dan bisa dibilang untuk banyak orang lain juga adalah bahwa Billboard menyediakan lebih dari 230 contoh grafik yang dapat Anda buat dengan perpustakaan ini. Contoh-contoh ini dibagi ke dalam kategori bagan seperti Basic, Axis, Data, Grid, Interaction, Region, dan banyak lainnya.

Ini berarti bahwa Anda tidak hanya dapat menemukan jenis bagan yang benar untuk proyek Anda dan persyaratannya, tetapi Anda juga dapat menjelajahi opsi lain dan melihat apakah contoh tertentu menarik perhatian Anda.

Contoh Billboard.js

Lihat Permintaan Bagan Pena – Billboard.js oleh DTCC (@dtcc) di CodePen.

#11 – Perspektif

Perspective adalah salah satu proyek yang dioperasikan oleh FINOS (Open-Source Fintech), dan FINOS sendiri juga merupakan bagian dari Linux Foundation. Sama seperti Bagan Ringan – Perspective.js berorientasi pada penyediaan solusi bagan untuk proyek berbasis keuangan. Namun, ia mampu melakukan lebih dari itu dan sering digunakan dalam proyek yang terkait dengan eCommerce, kisi data, dan segmentasi pengiriman.

Jika Anda pernah melihat grafik tentang Covid-19, Bandara, dan acara olahraga besar seperti Olimpiade, ada kemungkinan besar integrasi antarmuka dan aliran data dilakukan dengan Perspective. Ini memiliki Antarmuka Pengguna yang kaya, dioptimalkan untuk aliran data dan analisis real-time yang kompleks.

Ini tersedia untuk pengembang JavaScript dan Python dan menggunakan Komponen Web Elemen Kustom.

#12 – Bagan UI Toast

Jika ada, pustaka bagan Toast UI adalah pilihan lain untuk dipertimbangkan sejauh gaya bagan dan desainnya berjalan. Fungsionalitas di sini sangat mirip dengan perpustakaan yang telah kita lihat.

Saya pikir area di mana Toast UI berbeda dari pilihan lain adalah spesifikasi API-nya. Ini mungkin salah satu API terbaik yang bisa Anda dapatkan, dan dilengkapi dengan dokumentasi mendalam gratis. Salah satu fitur API adalah Instances , cara bagi Anda untuk mengubah data bagan secara dinamis baik karena sumber data Anda telah berubah, atau karena input pengguna.

Jenis bagan yang didukung Toast meliputi batang, kolom, garis, area, gelembung, peta pohon, radar, batang radial, dan lainnya. Cara yang lebih disukai untuk menggunakan perpustakaan ini adalah melalui npm, tetapi CDN tersedia, dan yang harus Anda lakukan adalah menentukan wadah div id="chart" untuk tempat Anda ingin grafik ditampilkan.

#13 – Rechart

Jika Anda bekerja terutama dengan React.js, library Recharts dibangun di atas D3.js dengan React. Ini menghormati arsitektur komponen asli React.js, dan bagan yang dibuat dengan Recharts dapat dipisahkan dan digunakan kembali sebagai komponen individual pada halaman yang Anda butuhkan.

Semua contoh bagan memiliki struktur komponen yang telah ditulis sebelumnya jika Anda ingin mencobanya dalam proyek yang ada. Perpustakaan ini pertama kali dirilis pada tahun 2016 tetapi masih dalam pengembangan aktif.

Rechart Contoh

Lihat Pen ReCharts oleh binu (@binutomy) di CodePen.