Ada sesuatu yang ajaib pada grafik. Kurva kurva langsung mengungkapkan seluruh situasi - sejarah perkembangan epidemi, kepanikan atau masa kemakmuran. Baris ini menerangi, membangkitkan imajinasi, meyakinkan.
- Henry. D. Hubbard
Jumlah data yang Anda perlukan untuk bekerja terus bertambah. Dan semakin banyak informasi, semakin sulit untuk memprosesnya. Itulah sebabnya topik visualisasi data menjadi sangat populer sekarang - dalam bentuk grafik, bagan, dasbor, lebih disukai interaktif. Presentasi visual dari data memungkinkan kita, orang, untuk menghabiskan lebih sedikit waktu dan upaya untuk melihat, menganalisis dan memahaminya, serta membuat keputusan yang tepat dan berdasarkan informasi berdasarkan ini.
Tidak mungkin ada orang yang menyangkal bahwa di web HTML5 modern, JavaScript adalah teknologi paling universal dan sederhana untuk memvisualisasikan data. Jadi, jika Anda terlibat dalam pengembangan front-end, maka kemungkinan besar Anda sudah berurusan dengan pembuatan grafik JS, atau Anda akan menemukan ini di masa depan (segera).
Ada
banyak perpustakaan JavaScript untuk membuat grafik dan bagan, yang masing-masing (seperti alat lainnya) memiliki kelebihan dan kekurangannya. Untuk membuat hidup Anda lebih mudah, saya memutuskan untuk berbicara tentang mereka yang paling saya sukai. Saya pikir sepuluh pustaka berikut adalah pustaka JS terbaik untuk membuat grafik, dan mereka benar-benar dapat membantu menyelesaikan hampir semua tugas visualisasi data. Mari kita membaca daftar bersama dan memastikan bahwa Anda mengenal mereka setidaknya secara fundamental dan bahwa Anda tidak kehilangan perpustakaan yang baik yang mungkin berguna dalam proyek-proyek besar saat ini atau di masa depan.
Baiklah, mari kita mulai: inilah perpustakaan JS terbaik untuk visualisasi data!
amCharts
amCharts adalah salah satu perpustakaan JavaScript yang berguna bagi mereka yang mencari solusi fleksibel sederhana dan sekaligus visualisasi data.
Fitur utama
- Berbagai jenis grafik, termasuk peta interaktif dan grafik Gantt.
- Kemampuan untuk menganalisis data "mendalam" (drilldown) dan opsi interaktif lainnya yang dirancang dengan baik.
- Dokumentasi yang menjelaskan semua metode yang diperlukan ditulis dengan baik, meskipun menurut selera saya, itu tidak terlalu nyaman untuk digunakan.
- Animasi grafik yang keren.
- Integrasi dengan React, Angular, Vue, Ember, dll.
- Plugin siap pakai untuk WordPress.
- Ekspor bagan ke gambar atau file PDF.
- Grafik langsung, penyesuaian penuh, fitur khusus sesuai dengan standar W3C.
- Dukungan teknis penuh untuk semua pengguna dan prioritas bagi pelanggan dengan lisensi.
- Klien: Microsoft, Amazon, Ebay, NASA, Samsung, Yandex, AT&T, dll.
Biaya
Branding dengan referensi dalam versi gratis. Untuk menghapus pencitraan merek, Anda harus membeli lisensi berbayar (dari $ 180), plus akses ke dukungan prioritas disediakan.
Pelajari lebih lanjut tentang amCharts
Anychart
AnyChart adalah pustaka JS yang dikembangkan dengan baik, ringan, dan multi-fungsi untuk memvisualisasikan data dengan rendering dalam SVG / VML. Mengizinkan pengembang web membuat semua jenis grafik dan bagan untuk pengambilan keputusan lebih lanjut berdasarkan pada mereka.
Fitur utama
- Lebih dari 80 jenis grafik, termasuk grafik konvensional, grafik saham, geovisualisasi (peta), serta grafik Gantt dan grafik jaringan PERT.
- Ada banyak opsi untuk memuat data: XML, JSON, CSV, JS API, Google Sheets, tabel HTML.
- Kemampuan untuk "menggali" ke dalam data pada grafik (drilldown).
- Indikator teknis untuk analisis teknis dan anotasi (alat menggambar) “out of the box”.
- Dokumentasi yang komprehensif dan deskripsi API, dukungan responsif.
- Integrasi dengan Angular, Oracle APEX, React, Elasticsearch, Vue.js, Android, iOS, dll. Untuk pengembang aplikasi dan dasbor di Qlik ada ekstensi siap pakai khusus untuk Qlik Sense.
- Banyak contoh grafik, bagan, dasbor, dan kotak pasir siap pakai dengan kode autocomplete.
- Dukungan untuk browser lama.
- Mengekspor data dalam berbagai format, termasuk laporan PDF; Gambar jpg, png, svg; File data Excel (XLSX) atau CSV dengan grafik.
- Klien: Oracle, Microsoft, Citi, Samsung, Nokia, AT&T, Ford, Volkswagen, Lockheed Martin, dll.
Biaya
Versi tanda air gratis. Untuk menghilangkan pencitraan merek dan mendapatkan kesempatan untuk menggunakan AnyChart dalam proyek komersial, Anda perlu membeli lisensi (dari $ 49).
Pelajari lebih lanjut tentang AnyChart
Chart.js
Chart.js adalah perpustakaan JavaScript sederhana dan sekaligus cukup fleksibel untuk visualisasi data, populer di kalangan perancang dan pengembang web. Ini adalah solusi dasar yang sangat baik bagi mereka yang tidak membutuhkan berbagai jenis grafik dan pengaturan individual, tetapi yang cukup membutuhkan untuk membuat grafik terlihat rapi, jelas dan informatif.
Fitur utama
- 8 jenis grafik dan grafik: linier (Garis), linier dengan area (Area), diperintah (Bar), bundar (Pai), kelopak "Radar" (Radar), kutub (Kutub), gelembung (Gelembung) dan sebar plot ( Menyebarkan).
- Semua jenis grafik dapat disesuaikan dan disediakan dengan animasi, dan semuanya adaptif saat bekerja di jaringan.
- Fungsionalitas dapat ditingkatkan melalui penggunaan plugin.
- Dokumentasi yang bagus.
- Dukungan melalui Stack Overflow.
- Dukungan untuk browser IE9 +.
Biaya
Perpustakaan sumber terbuka gratis. Diterbitkan di bawah lisensi MIT.
Pelajari lebih lanjut tentang Chart.js
Chartart.js
Chartist.js adalah pustaka JS open source sederhana yang juga dapat digunakan untuk membuat grafik dan bagan adaptif yang rapi. Secara umum, ini sangat cocok untuk mereka yang hanya membutuhkan grafik Garis, Bar atau Pie dasar dan tidak perlu banyak dalam hal visualisasi data. Penampilan yang bagus, dan tidak perlu banyak fitur.
Fitur utama
- Hanya 3 jenis bagan: Line, Bar, Pie.
- Animasi hebat.
- Dokumentasi API berisi semua informasi yang diperlukan, tetapi tidak nyaman untuk menggunakannya (bersiap-siap untuk menggulir banyak).
- Mengizinkan penggunaan plugin untuk memperluas fungsionalitas.
- Ini menggunakan SVG untuk menggambar grafik.
- Dukungan untuk browser lama.
Biaya
Sumber terbuka, bebas digunakan untuk tujuan apa pun.
Pelajari lebih lanjut tentang Chartist.js
D3.js
D3.js adalah perpustakaan visualisasi data JavaScript sumber terbuka yang kuat. Dia memiliki lebih dari 20 ribu garpu di GitHub. Pada intinya, D3 lebih seperti kerangka kerja dari perpustakaan. Bekerja dengannya tidak mudah, terutama pada awalnya. Tetapi ada banyak sumber informasi yang berguna tentang D3. Dan pada akhirnya, dengan bantuan perpustakaan ini Anda dapat membuat visualisasi asli yang luar biasa dan gambar apa pun dari awal, yang menjadikan D3 alat yang sangat berharga.
Fitur utama
- Ini mendukung banyak jenis grafik, lebih dari sebagian besar perpustakaan JavaScript lainnya (termasuk, misalnya, diagram Voronoi).
- Butuh waktu untuk menguasainya. Kurang jelas dan jelas daripada beberapa perpustakaan komersial dalam daftar (mis. AnyChart). Dikompensasi oleh sejumlah besar tutorial dan API yang sangat keren.
- Menggabungkan komponen visualisasi yang kuat dengan pendekatan berbasis data untuk memanipulasi DOM.
- Mudah debug dengan alat peramban.
- Banyak contoh.
- Fungsi Pembuatan Kurva.
- Seret dan lepas GUI.
Biaya
D3 adalah perpustakaan sumber terbuka untuk membuat grafik dan bagan, yang benar-benar gratis untuk digunakan untuk tujuan apa pun.
Pelajari lebih lanjut tentang D3.js
Fusionchart
FusionCharts adalah perpustakaan lain yang baik untuk membuat grafik dan bagan interaktif, dengan ratusan contoh siap pakai. Grafik FusionCharts mendukung data JSON dan XML. Rendering - via HTML5 / SVG dan VML.
Fitur utama
- Lusinan jenis bagan, 2D dan 3D, dan lebih dari 950 peta yang mencakup semua benua.
- Grafik dan peta animasi dan sepenuhnya interaktif.
- API Server untuk ASP.NET, PHP, Ruby on Rails.
- Kompatibel dengan jQuery, Angular, PHP, ASP.NET, React Native, Django, React, Ruby on Rails, Java, dll.
- Panduan pengguna dan deskripsi API yang cukup terperinci.
- Banyak contoh grafik dan dasbor.
- Dukungan untuk browser lama.
- Ekspor ke PNG, JPG, dan PDF.
- Dukungan - melalui basis pengetahuan dan forum komunitas.
- Dukungan prioritas tanpa batas untuk pengguna yang membeli lisensi.
- Klien: Apple, IBM, Google, Intel, Microsoft, PayPal, Oracle, Adobe, dll.
Biaya
Gratis untuk penggunaan non-komersial. Lisensi berbayar untuk penggunaan komersial (dari $ 497).
Pelajari lebih lanjut tentang FusionCharts
Grafik Google
Google Charts adalah pilihan yang sangat baik untuk proyek-proyek di mana kesederhanaan dan stabilitas grafik lebih disukai daripada pengaturan kustomisasi yang rumit dan terperinci.
Fitur utama
- Render grafik dalam HTML5 / SVG dan VML.
- Banyak contoh grafik, bagan, dasbor.
- Semua grafik bersifat interaktif, beberapa juga dapat diperbesar dan digeser.
- Dokumentasi lengkap.
- Dukungan untuk browser lama.
- Dukungan melalui FAQ, GitHub dan forum.
Biaya
Lisensi gratis, tetapi kode sumber tidak terbuka. Itu tidak memungkinkan Anda untuk meng-host file Google JS di server Anda, jadi mungkin tidak cocok untuk Anda jika Anda bekerja dengan data sensitif.
Pelajari lebih lanjut tentang Google Charts
Highchart
Highcharts adalah salah satu pustaka JavaScript yang paling fleksibel dan populer untuk membuat grafik dan bagan dalam HTML5, dengan rendering dalam SVG (VML). Ini ringan, mendukung berbagai pilihan berbagai jenis visualisasi dan memberikan kinerja tinggi.
Fitur utama
- Menggunakan javascript murni. Data dapat diunduh secara eksternal.
- Dokumentasi dan deskripsi yang layak Dokumentasi API, kasus pengguna.
- Interaktivitas, termasuk drilldown (kemampuan untuk menganalisis data "secara mendalam").
- Dapat digunakan dengan React, Angular, Meteor, .NET, iOS, dll.
- Ekspor ke format PNG, JPG, PDF, dan SVG.
- Dukungan untuk pengguna versi gratis melalui forum dan Stack Overflow. Email premium dan dukungan Skype hanya tersedia untuk pengguna komersial yang memiliki lisensi yang sesuai.
- Klien: Visa, Yahoo!, Facebook, Twitter, Groupon, Nokia, Ericsson, Mastercard, Yandex, dll.
Biaya
Gratis untuk penggunaan non-komersial. Untuk penggunaan komersial, Anda harus membeli lisensi (dari $ 50).
Pelajari lebih lanjut tentang Highcharts
Plotly.js
Plotly.js adalah perpustakaan JavaScript sumber terbuka tingkat tinggi, gratis. Dibangun pada D3.js dan WebGL. Ini dapat digunakan untuk membuat berbagai jenis visualisasi data, termasuk, misalnya, grafik statistik tiga dimensi.
Fitur utama
- 20 jenis grafik dan bagan yang dapat disematkan di situs atau digunakan untuk membuat presentasi yang dinamis.
- Ini digunakan sebagai pustaka charting berbasis browser untuk Python, R, MATLAB, abstrak grafik menjadi struktur JSON deklaratif.
- Dokumentasi API yang luas.
- Animasi yang bagus.
- Penggunaan Bereaksi.
- Ekspor grafik ke PNG dan JPG. Ekspor ke EPS, SVG, dan PDF tersedia dengan berlangganan.
- Banyak contoh yang sudah jadi.
- Ini dapat bekerja dengan lembar kerja Excel atau langsung dengan database Anda.
- Forum Dukungan.
Biaya
Perpustakaan sumber terbuka gratis.
Pelajari lebih lanjut tentang Plotly.js
Zingchart
ZingChart adalah alat yang berguna untuk membuat bagan yang interaktif dan adaptif. Ini adalah perpustakaan cepat dan fleksibel yang membuatnya mudah untuk bekerja dengan data besar dan menghasilkan grafik dengan data dalam jumlah besar.
Fitur utama
- Mendukung lebih dari 30 jenis grafik dan bagan.
- Sepenuhnya dapat disesuaikan, dengan pengaturan desain ala CSS.
- Kompatibel dengan jQuery, Angular, Node.js, PHP, dll.
- Bekerja dengan data secara real time, rendering cepat set data dari berbagai ukuran.
- Data dapat dimuat melalui objek JS, JSON, CSV, PHP, AJAX, MySQL.
- Dokumentasi API yang terperinci dan cukup mudah dibaca.
- Dukungan gratis dan premium melalui pusat bantuan ZingChart, Stack Overflow, email dan obrolan.
- Klien: Microsoft, Boeing, Adobe, Apple, Cisco, Google, Alcatel, dll.
Biaya
Lisensi bermerek menyediakan akses penuh ke perpustakaan ZingChart secara gratis. Untuk penggunaan komersial, diperlukan lisensi berbayar (dari $ 199).
Pelajari lebih lanjut tentang ZingChart
Kesimpulan
Jadi, saya telah membuat daftar pustaka JavaScript terbaik untuk membuat grafik dan bagan, setidaknya yang saya anggap top-notch. Membandingkan semuanya secara menyeluruh, dengan mempertimbangkan sepenuhnya semua parameter, akan sangat sulit. Masing-masing memiliki pro dan kontra, dan pilihannya sangat tergantung pada keterampilan pengembang, serta tugas spesifik.
Tentu saja, ada beberapa fitur, fitur yang membuat satu perpustakaan lebih cepat, atau lebih cantik dalam hal desain, atau lebih fleksibel daripada yang lain. Tetapi, pada akhirnya, tidak begitu penting perpustakaan mana yang ada dalam daftar, karena pada akhirnya yang terbaik adalah yang paling memenuhi persyaratan spesifik Anda sebagai bagian dari satu tugas.
Saran saya adalah untuk mengenal semua perpustakaan terkemuka ini setidaknya sedikit lebih dekat: ketika Anda membutuhkan grafik JS untuk memvisualisasikan data dalam proyek tertentu, sangat mungkin bahwa satu atau lebih dari mereka akan cocok untuk Anda. Jika Anda ingin berurusan dengan daftar lebih otentik, perhatikan
perbandingan di Wikipedia .
Jika Anda perlu memvisualisasikan data pada peta interaktif, di mana tren geografis, hubungan, hubungan, aliran, dll. Sangat penting, baca artikel saya sebelumnya di
perpustakaan JavaScript terbaik untuk data visualisasi geografis dalam bentuk peta (ada
terjemahan ke dalam bahasa Rusia di Habré) .
Selamat bersenang-senang dan nikmati visualisasi data menggunakan JavaScript!
Ini adalah terjemahan saya dari Perpustakaan Pembuatan Bagan JavaScript Teratas untuk Setiap Visualisasi Data Perlu artikel yang saya terbitkan sebelumnya di Hacker Noon .