Perpustakaan carta JavaScript percuma teratas

Data ada di sekeliling kita. Kami menggunakannya untuk mengoptimumkan prestasi, penyampaian perkhidmatan dan kecekapan. Walau bagaimanapun, nombor mentah bukanlah cara terbaik untuk menyampaikan maklumat. Orang ramai lebih cenderung untuk mengekalkan sebarang data yang anda berikan kepada mereka jika anda membentangkannya kepada mereka dalam format visual dan bukannya format teks. Ini menjadikan gambar rajah sebagai alat yang sangat diperlukan untuk berkongsi maklumat.

JavaScript menawarkan banyak perpustakaan percuma yang boleh anda gunakan untuk membuat carta di tapak web anda. Dalam artikel ini, kami akan membuat senarai perpustakaan carta JavaScript percuma terbaik dan memberikan gambaran ringkas tentang ciri-ciri mereka untuk membantu anda membuat pilihan termaklum.

1. Carta.js

Apabila berfikir tentang melukis carta di tapak web, salah satu perpustakaan pertama yang terlintas di fikiran ialah Chart.js. Dua daripada kelebihan terbesar menggunakan perpustakaan ini ialah ia sangat mudah untuk dipelajari dan disepadukan ke dalam tapak web anda, dan ia membolehkan anda mencipta lapan jenis carta biasa: carta garisan, carta bar, carta radar, carta gelembung, carta serakan, Carta kawasan, pai dan carta kutub. Anda juga boleh memaparkan lebih daripada dua jenis carta pada carta yang sama.

Persembahan animasi oleh Roseclad.

Pustaka menggunakan elemen kanvas HTML5 untuk memaparkan semua carta dan carta adalah responsif secara lalai. Ini bermakna mereka akan menyesuaikan diri dengan perubahan dalam saiz skrin. Aspek berbeza carta juga boleh dianimasikan menggunakan kaedah luar kotak yang disediakan oleh perpustakaan.

2. Chartist.js

Chartist.js library ialah satu lagi penyelesaian yang mudah digunakan untuk mereka yang ingin mencipta carta mereka sendiri dengan bantuan JavaScript. Terdapat beberapa persamaan antara Chart.js dan Chartist.js, tetapi juga beberapa perbezaan asas.

Pembentangan Charist oleh Ian Whitfield.

Pustaka ini ringan dan responsif, sama seperti Chart.js. Ia juga mudah dipelajari dan menyokong semua jenis carta asas seperti carta garis, carta bar, carta pai, dsb. Pustaka ini tidak mempunyai sebarang kebergantungan luaran yang anda mesti muatkan untuk carta berfungsi.

Satu perbezaan besar antara Chart.js dan Chartist.js ialah yang terakhir menggunakan SVG untuk memaparkan cartanya. Semua carta dibahagikan kepada banyak subjenis. Sebagai contoh, anda boleh mencipta carta garisan ringkas serta carta garisan dengan kawasan asas yang diisi atau carta garisan bipolar.

Chartist.js tertumpu pada penyediaan kefungsian untuk memaparkan carta. Ini bermakna anda tidak mendapat fungsi terbina dalam untuk pengendalian acara, memaparkan label, dsb. Walau bagaimanapun, agak mudah untuk menambahkannya sendiri.

3. D3.js

D3.js library ialah singkatan dokumen dipacu data dan merupakan salah satu perpustakaan heavyweight dalam bidang visualisasi data. Anda boleh menggunakan pustaka ini untuk mewakili data anda secara visual dalam apa jua cara yang anda suka. Ini juga termasuk jenis carta standard.

Demo D3 Jahid Hssan.

Kelebihan terbesar perpustakaan ini ialah kuasa dan fleksibiliti yang anda perolehi apabila membuat sebarang carta. Pustaka ini membolehkan anda mencipta hampir apa sahaja yang anda boleh bayangkan untuk mewakili data anda. Anda tidak terhad kepada jenis carta biasa. Pustaka menggunakan gabungan teknologi seperti SVG, Kanvas dan HTML untuk mencipta sebarang elemen visual.

Terlalu banyak fleksibiliti dalam pemaparan bermakna akan ada keluk pembelajaran yang curam untuk menggunakan semua ciri yang ditawarkan oleh perpustakaan ini. Terdapat kira-kira 30 modul dan lebih daripada 1,000 kaedah untuk membantu anda menyelesaikan kerja.

4. C3.js

Sesetengah orang mungkin teruja menggunakan D3.js untuk mencipta carta di tapak web mereka, tetapi mereka mungkin tidak digalakkan oleh keluk pembelajaran yang curam. Bagaimana jika saya memberitahu anda ada penyelesaian untuk masalah ini?

Pustaka C3.js menyediakan jalan tengah, carta yang anda buat masih menggunakan D3.js di bawah hud, tetapi anda tidak perlu menghabiskan terlalu banyak masa menulis kod untuk melakukannya atau mempelajari setiap butiran D3 perpustakaan .js. Ini ialah penyelesaian yang bagus untuk orang yang berminat untuk mencipta carta berdasarkan D3.js.

#🎜🎜 #Beat demo C3 Temperli.

Tiga ciri yang menjadikan perpustakaan ini berguna ialah kemudahan penggunaannya, pilihan penyesuaian dan kawalan yang anda ada ke atas graf yang dibentangkan. Pustaka ini pada asasnya adalah pembalut sekitar D3.js, jadi ia melakukan semua beban berat yang diperlukan untuk membuat carta.

Pustaka juga menyediakan kelas tersuai untuk setiap elemen yang dipaparkan, menjadikannya lebih mudah untuk anda menyediakan gaya anda sendiri. Akhir sekali, terdapat beberapa panggilan balik yang boleh anda gunakan untuk mengawal gelagat carta anda, walaupun selepas carta telah diberikan.

5. Carta Smoothie

Frappe Charts ialah perpustakaan sumber terbuka yang menakjubkan yang membantu anda mencipta carta yang bergaya dan responsif dengan mudah. Anda tidak perlu memuatkan sebarang kebergantungan tambahan untuk memaparkan carta.

Pembentangan oleh Kamal Dev.

Perpustakaan dilengkapi dengan banyak jenis carta terbina dalam seperti carta bar, garisan, kawasan, pai dan donat. Anda juga boleh membuat beberapa carta berasaskan peratusan yang menunjukkan bahagian item yang berbeza, serupa dengan carta pai, tetapi pada bar dan bukannya kalangan. Anda juga boleh membuat carta peta haba, serupa dengan carta sumbangan repositori yang dipaparkan GitHub.

Salah satu perkara yang anda akan suka tentang perpustakaan ini ialah skop penyesuaian yang ditawarkannya. Petua alat yang disertakan dengan perpustakaan adalah hebat. Anda juga boleh menganotasi rajah dengan menandakan garis dan kawasan yang berbeza. Terdapat banyak pilihan konfigurasi yang tersedia, dan anda juga boleh mengubah suai titik data selepas ia diberikan.

6. Plotly.js

Plotly.js juga merupakan perpustakaan JavaScript sumber terbuka dan percuma dengan senarai ciri yang diperluaskan. Perpustakaan juga mengandungi modul Python dan R sekiranya anda ingin melukis beberapa graf dalam bahasa ini.

Demo dari plotly.

Plotly dibina pada D3.js dan stackgl. Walau bagaimanapun, tidak seperti D3, pembangun Plotly memberi tumpuan khusus untuk memudahkan penggunaan dan melukis jenis carta biasa dengan agak cepat. Ini sesuai untuk orang yang mencari pelbagai jenis carta yang berbeza. Plotly membantu anda mencipta 40 jenis carta yang berbeza, merangkumi segala-galanya daripada garis asas, bar dan plot serakan kepada carta statistik seperti histogram dan plot ketumpatan 2D.

Perpustakaan mempunyai pengendalian acara terbina dalam dan boleh mengendalikan acara klik, tuding dan pemilihan, dsb. Ia juga menyediakan banyak pilihan konfigurasi lain dan fungsi berguna seperti zum masuk dan keluar, menyorot, menetapkan semula, dsb. Plotly.js membolehkan anda membuat carta boleh diedit atau menggunakan tempat anda sendiri untuk memaparkan teks dalam label.

7. ApexCharts

ApexCharts menggambarkan dirinya sebagai perpustakaan carta JavaScript moden untuk membina carta interaktif menggunakan API mudah. Mencipta carta menggunakan perpustakaan ini sebenarnya adalah proses yang mudah. Anda hanya menghantar semua data yang diperlukan, seperti jenis carta, label dan set data untuk diplotkan sebagai objek dengan pasangan nilai kunci dan perpustakaan akan menguruskan segala-galanya.

Demo oleh Reuben Prol.

Beberapa ciri ketara lain pustaka ini termasuk keupayaan untuk mencipta carta yang berbeza dan kemudian menyegerakkannya. Perubahan yang anda buat pada satu carta akan ditunjukkan dalam carta yang lain. Terdapat banyak pilihan untuk anda berinteraksi dengan carta. Anda boleh mengezum masuk dan keluar, menyorot atau menatal data ke atas dan ke bawah.

Jenis carta yang tersedia termasuk carta garisan, carta bar, carta pai, carta donat, carta radar, carta candlestick, dsb. Anda juga boleh mencampurkan jenis carta yang berbeza bersama-sama, seperti menunjukkan carta bar, garisan dan kawasan yang bertindih antara satu sama lain. Anda juga boleh menambah anotasi anda sendiri dan mengemas kini data carta secara dinamik.

8. uPlot

Pustaka carta JavaScript uPlot mendakwa sebagai penyelesaian yang kecil dan pantas bagi mereka yang ingin memaparkan sejumlah besar titik data tanpa sebarang kesan buruk terhadap prestasi. Mereka juga menyediakan perbandingan kelajuan dengan beberapa perpustakaan carta popular pada halaman GitHub mereka.

Metrik prestasi yang menakjubkan ialah perpustakaan boleh merancang kira-kira 150,000 titik data dalam 135 milisaat. Ciri lain termasuk fungsi zum dan tuding yang sangat pantas dan responsif. Demo CodePen berikut mencipta carta dengan 100,000 titik data.

Pembentangan oleh Stephen Wicklund.

Beberapa ciri berguna pustaka ini termasuk berbilang paksi-y, skala dan grid, serta pelbagai jenis skala (cth. linear dan logaritma). Anda boleh menggunakan pustaka ini untuk mencipta jenis seperti carta garisan, bar dan kawasan. Anda juga boleh menyesuaikan penampilan carta anda menggunakan sifat seperti strok, isi dan sempang.

Ada beberapa perkara yang mungkin menghalang anda daripada menggunakan perpustakaan ini. Keuntungan prestasi yang besar datang pada harga. Perpustakaan tidak menyediakan sebarang peralihan dan animasi terbina dalam. Tiada juga gelagat terbina dalam untuk mengendalikan gelagat menatal dan mengezum. Walau bagaimanapun, pemalam wujud yang boleh memberikan anda fungsi ini.

Fikiran Akhir

Kami memperkenalkan lapan perpustakaan carta JavaScript yang popular dan percuma yang cuba memenuhi pelbagai jenis keperluan. Setiap daripada mereka mempunyai kelebihan dan kekurangannya sendiri, jadi anda boleh memilih yang sesuai dengan anda dan memenuhi semua keperluan anda. Chart.js bagus jika anda mahukan sesuatu yang ringkas dan mudah digunakan, contohnya, atau mencipta carta yang lebih maju menggunakan Carta Apex.

Lihat beberapa demo lain yang telah disiarkan oleh perpustakaan pada halamannya dan lihat yang mana antaranya menawarkan ciri yang anda suka.

Atas ialah kandungan terperinci Perpustakaan carta JavaScript percuma teratas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!