9 Perpustakaan Javascript Untuk Membina Carta Interaktif

Jadi anda mempunyai banyak data anda, dengan beberapa pembolehubah, yang anda perlu menyerahkan kepada orang lain. Data mentah, tidak teratur akan menjadi sukar bagi mereka untuk memahami. Ini sebabnya anda memerlukan bantuan daripada carta. Dalam reka bentuk web, carta adalah salah satu alat terbaik untuk visualisasi data. Mudah dibaca, mudah di mata dan mudah dibentuk.

Tetapi mari kita ambil sesuatu yang tidak diketahui: mari kita tambah animasi dan interaktiviti kepada carta tersebut, supaya pembaca tidak hanya dapat mempelajari sesuatu yang baru dari carta, tetapi juga bermain dengannya. Ia sebenarnya lebih mudah daripada bunyi, terima kasih kepada beberapa perpustakaan JS di luar sana. Mari kita periksa mereka.

1. Carta JS

Chart.js adalah perpustakaan tidak berkepentingan untuk membina carta dalam 6 jenis: carta garisan, carta bar, carta radar, carta kawasan kutub, carta dan carta donat. Perpustakaan juga berpecah mengikut jenis carta supaya halaman anda tidak terjejas dengan apa yang tidak diperlukan. Ia menyokong reka bentuk responsif dan anda boleh menukar pembolehubah seperti warna atau animasi dengan mudah untuk menyesuaikan antara muka carta.

2. Chartist JS

Chartist JS adalah perpustakaan yang hebat untuk membina carta responsif yang menggunakan SVG. Selain itu, Chartist memberikan anda fleksibiliti dengan menggunakan pemisahan yang jelas mengenai kebimbangan: gaya dengan CSS dan kawalan dengan JS. Untuk membuat penyesuaian lebih mudah, fail SASS dimasukkan. Perkara yang menarik di sini adalah anda mempunyai pilihan tanpa had untuk menghidupkan carta anda menggunakan animasi animasi Chartist, SMIL, yang memberikan anda pilihan animasi tambahan.

3. C3 JS

C3 JS adalah perpustakaan untuk membina carta berdasarkan D3 JS. Ia membungkus kod yang diperlukan untuk membina carta dengan D3 JS, jadi anda boleh melangkau menulis kod D3, dan masukkan data anda. C3 datang dengan pelbagai API yang boleh anda gunakan untuk mengawal carta anda dengan mudah. Untuk menyesuaikan carta anda, tentukan gaya tersuai anda sendiri ke kelas CSS yang diberikan. Membina carta dari carta garisan mudah untuk mengukur carta. Lihat halaman ini untuk melihat bagaimana perpustakaan berfungsi.

4. Flot

Flot adalah jQuery plguin untuk membuat carta dengan unsur interaktif seperti menghidupkan atau mematikan siri, interaksi titik data, panning, zoom dan banyak lagi. Flot datang dengan pelbagai pilihan jenis carta dan jika anda mahukan lebih banyak keupayaan pada carta anda, berikut adalah beberapa plugin yang boleh anda gunakan juga. Carta akan berfungsi dengan baik dengan penyemak imbas yang menyokong kanvas HTML.

5. EChart

Echart adalah sebuah perpustakaan yang sangat komprehensif dari China yang menyokong pelbagai jenis carta, boleh memproses data besar (merancang sehingga 200,000 titik data pada carta Cartesian), mempunyai perayauan skala, keupayaan untuk mengekstrak, mengintegrasikan, dan bertukar data dengan mudah di kalangan beberapa carta, yang membolehkan satu dengan mudah menukar dari satu jenis data kepada yang lain, dan lebih banyak lagi.

6. Peity

Peity akan menambah carta mini ke laman web anda. Ia adalah plugin jQuery kecil yang mengubah elemen menjadi mini svg bar, bar, donat, atau carta pai. Anda hanya perlu membuat elemen dan memberikan nilai seperti itu 1/5 dan membuat panggilan peity ('pie') pada elemen itu untuk membuat carta mini pie. Contohnya, untuk membuat carta donat yang hanya satu perlima yang diserlahkan, di sini adalah HTML:

1/5

Anda boleh menyesuaikan warna, jejari, lebar dan ketinggian carta, tetapi secara lalai ia dipaparkan dalam saiz kecil.

7. DC JS

DC JS mempunyai persamaan dengan C3 JS dari segi enjin yang digunakan; kedua-duanya menggunakan pustaka D3 untuk membuat carta dalam SVG. DC JS dicipta untuk membantu anda memvisualisasikan data dan analisis untuk penyemak imbas dan untuk peranti mudah alih. Memandangkan ia memanfaatkan JS D3, ia membolehkan anda menambah interaksi pengguna pada carta anda. DC JS adalah salah satu perpustakaan yang kuat untuk membuat carta dari kerumitan sederhana hingga tinggi.

8. Google Chart

Anda boleh membuat carta interaktif dan alat data menggunakan Google Visualization API melalui Google Chart. Terdapat galeri carta untuk menyemak keupayaan visualisasi data Google Chart. Untuk memulakan, sematkan JavaScript mudah ke laman web anda untuk memuatkan perpustakaan Google Carta yang anda perlukan. Kemudian senaraikan data yang anda mahu carta, dan buat beberapa penyesuaian melalui pilihan carta. Akhirnya buat objek carta dengan id, dan pada halaman web anda, buat a

dengan id tersebut untuk memaparkan carta anda.

9. NVD3

NVD3 adalah satu set carta dan komponen carta yang boleh digunakan semula yang dibina dengan D3 JS. Perpustakaan ini adalah 'templat' yang akan membantu memudahkan anda membina carta. Lihat banyak carta sampel yang dibina dengan NVD3 di sini.

Sekarang Baca: JavaScript JavaScript untuk Membuat Peta Interaktif & Disesuaikan