9 Javascript Library Untuk Membuat Grafik Interaktif

Jadi, Anda memiliki banyak data, dengan sejumlah variabel, yang harus Anda relay ke orang lain. Data mentah dan tidak terorganisir akan sulit dipahami oleh mereka. Inilah sebabnya mengapa Anda membutuhkan bantuan dari grafik. Dalam desain web, bagan adalah salah satu alat terbaik untuk visualisasi data. Mudah dibaca, mudah dilihat dan relatif mudah diatur.

Tapi mari kita mengambil beberapa langkah: mari tambahkan animasi dan interaktivitas ke grafik tersebut, sehingga pembaca tidak hanya bisa belajar sesuatu yang baru dari bagan, tetapi juga bermain dengannya. Ini sebenarnya lebih mudah daripada kedengarannya, berkat sejumlah perpustakaan JS di luar sana. Mari kita periksa.

1. Bagan JS

Chart.js adalah pustaka tanpa ketergantungan untuk membuat bagan dalam 6 jenis: bagan garis, bagan batang, bagan radar, bagan area kutub, bagan pie dan donat. Pustaka juga dibagi berdasarkan jenis bagan sehingga halaman Anda tidak macet dengan apa yang tidak diperlukan. Ini mendukung desain responsif dan Anda dapat dengan mudah mengubah variabel seperti warna atau animasi untuk menyesuaikan antarmuka grafik.

2. Chartist JS

Chartist JS adalah perpustakaan yang bagus untuk membangun grafik responsif yang memanfaatkan SVG. Selain responsifnya, Chartist memberi Anda fleksibilitas dengan menggunakan pemisahan keprihatinan yang jelas: gaya dengan CSS dan kontrol dengan JS. Untuk mempermudah penyesuaian, file SASS disertakan. Hebatnya di sini adalah Anda memiliki opsi tanpa batas untuk menghidupkan grafik Anda menggunakan API animasi Chartist, SMIL, yang memberi Anda opsi animasi tambahan.

3. C3 JS

C3 JS adalah perpustakaan untuk membangun grafik berdasarkan D3 JS. Itu merangkum kode yang diperlukan untuk membangun grafik dengan D3 JS, sehingga Anda dapat melewati menulis kode D3, dan hanya memasukkan data Anda. C3 hadir dengan beragam API yang dapat Anda gunakan untuk mengontrol grafik Anda dengan mudah. Untuk menyesuaikan bagan Anda, tentukan gaya kustom Anda sendiri ke kelas CSS yang diberikan. Buat bagan dari bagan garis sederhana untuk mengukur bagan. Periksa halaman ini untuk melihat cara kerja perpustakaan.

4. flot

Flot adalah jQuery plguin untuk membuat bagan dengan elemen interaktif seperti menghidupkan atau mematikan seri, interaksi titik data, panning, zooming dan banyak lagi. Flot hadir dengan berbagai opsi jenis bagan dan jika Anda ingin lebih banyak kemampuan pada bagan Anda, berikut adalah beberapa plugin yang dapat Anda gunakan juga. Grafik akan bekerja dengan baik dengan browser yang mendukung kanvas HTML.

5. EChart

Echart adalah pustaka yang luar biasa komprehensif dari China yang mendukung beberapa jenis bagan, dapat memproses data besar (merencanakan hingga 200.000 titik data pada bagan Cartesian), memiliki skala roaming, kemampuan untuk dengan mudah mengekstraksi, mengintegrasikan, dan bertukar data di antara beberapa bagan, memungkinkan satu untuk dengan mudah beralih dari satu tipe data ke yang lain, dan banyak lagi.

6. Peity

Peity akan menambahkan bagan mini ke halaman web Anda. Ini adalah plugin jQuery kecil yang mengubah elemen menjadi mini svg garis, bar, donat, atau diagram lingkaran. Anda hanya perlu membuat elemen dan memberikan nilai suka 1/5 dan melakukan panggilan peity ('pie') pada elemen itu untuk membuat bagan pai mini. Misalnya, untuk membuat bagan donat yang hanya disorot seperlima, berikut ini adalah HTML:

1/5

Anda dapat menyesuaikan warna bagan, jari-jari, lebar dan tinggi, tetapi secara default ditampilkan dalam ukuran kecil.

7. DC JS

DC JS memiliki kesamaan dengan C3 JS dalam hal mesin yang digunakan; mereka berdua menggunakan perpustakaan D3 untuk membuat grafik di SVG. DC JS dibuat untuk membantu Anda memvisualisasikan data dan analisis untuk browser dan untuk perangkat seluler. Karena memanfaatkan pada D3 JS, ini memungkinkan Anda untuk menambahkan interaksi pengguna ke bagan Anda. DC JS adalah salah satu perpustakaan yang kuat untuk membuat grafik dari kompleksitas sederhana hingga tinggi.

8. Google Chart

Anda dapat membuat bagan dan alat data interaktif menggunakan Google Visualisasi API melalui Bagan Google. Ada galeri bagan untuk memeriksa kemampuan visualisasi data Bagan Google. Untuk memulai, tanamkan JavaScript sederhana ke halaman web Anda untuk memuat pustaka Google Chart yang Anda butuhkan. Kemudian daftarkan data yang ingin Anda bagan, dan buat beberapa penyesuaian melalui opsi bagan. Terakhir, buat objek grafik dengan id, dan di halaman web Anda, buat a

dengan id itu untuk menampilkan bagan Anda.

9. NVD3

NVD3 adalah seperangkat bagan yang dapat digunakan kembali dan komponen bagan yang dibangun dengan D3 JS. Pustaka ini karenanya merupakan 'templat' yang akan membantu memudahkan Anda membuat bagan. Lihat banyak contoh grafik yang dibangun dengan NVD3 di sini.

Sekarang Baca: Perpustakaan JavaScript untuk Membuat Peta Interaktif & Khusus