Dalam hal interaksi, Fleet pasti akan membawa Anda sedekat mungkin dengan grafis Flash ke jQuery. Meskipun keluaran grafiknya cukup apik dan terlihat bagus, Anda juga dapat berinteraksi dengan titik data. Maksud saya adalah Anda bisa mengarahkan kursor ke titik data dan mendapatkan visualnya masukan dari nilai titik ini pada grafik.

Mendukung versi bagasi armada diagram lingkaran.

Kemungkinan penskalaan armada.

Selain itu, Anda juga memiliki opsi untuk memilih potongan grafik untuk mengembalikan data untuk "zona" tertentu. Sebagai fungsi tambahan Untuk "zonasi" ini Anda juga dapat memilih area pada grafik dan memperbesarnya untuk melihat titik data lebih dekat. Sangat keren.

grafik mini

Batasan: Pai, Garis, Batang, Kombinasi

Sparklines adalah alat grafis mini favorit saya. Sangat bagus untuk grafik gaya dasbor (pikirkan dashboard Alat Google Analisis pada login berikutnya). Karena ukurannya sangat kecil, mereka dapat dimasukkan ke dalam string (seperti pada contoh di atas). Ide bagus lainnya yang dapat digunakan di semua plugin grafis adalah kemampuan memperbarui diri. Demo Kecepatan Mouse mereka menunjukkan kepada Anda kekuatan grafik langsung yang terbaik.

Diagram permintaan 0.21

Batasan: Area, Garis, Batang dan kombinasinya

Diagram jQuery 0.21 bukan yang terbaik plugin yang bagus untuk membuat diagram, itu harus ditunjukkan di sana. Fungsionalitasnya cukup mendasar dalam hal grafik yang dapat ditanganinya, namun bisa fleksibel jika Anda meluangkan waktu dan usaha untuk melakukannya.

Menambahkan nilai ke bagan relatif sederhana:

ChartAdd(( "label" : "Prospek", "ketik" : "Garis", "warna" : "#008800", "nilai" : ["100","124","222","44"," 123","23","99"] ));

jQchart

Batas: Batang, Garis

jQchart aneh, mereka telah membangun transistor animasi dan fungsionalitas drag and drop ke dalam grafik, namun ini agak kikuk - dan sepertinya tidak ada gunanya. Ini menghasilkan grafik yang tampak bagus jika Anda menggunakan CSS dengan benar, tetapi ada hal yang lebih baik di luar sana.

Grafik Tufte

Keterbatasan: Bar dan Stacked Bar

Tuftegraph memasarkan dirinya sebagai "grafik batang indah yang akan Anda tunjukkan kepada ibu Anda". Dia semakin dekat, Armadanya lebih cantik, tapi Tufte membuat dirinya sangat ringan. Meskipun ini mengakhiri batasannya - ada beberapa opsi untuk dipilih, sehingga Anda mendapatkan apa yang Anda tentukan. Lihatlah kartu kemenangan cepat.

• Terjemahan

Hampir mustahil untuk dibayangkan panel informasi tidak ada bagan atau grafik. Mereka menampilkan statistik kompleks dengan cepat dan efisien. Selain itu, diagram yang baik juga meningkatkan keseluruhan desain situs web Anda.

Pada artikel ini, saya akan menunjukkan kepada Anda beberapa perpustakaan JavaScript terbaik untuk pembuatan diagram (dan tabel pivot). Perpustakaan ini akan membantu Anda membuat grafik yang indah dan dapat disesuaikan untuk proyek masa depan Anda.

Meskipun sebagian besar perpustakaan gratis dan dapat didistribusikan ulang, beberapa di antaranya memiliki versi berbayar dengan fungsionalitas tambahan.

D3.js - Dokumen yang berpusat pada data

Tidak seperti banyak pustaka JavaScript lainnya, D3.js tidak langsung dilengkapi dengan grafik bawaan. Namun, Anda dapat melihat daftar grafik yang dibuat dengan D3.js untuk mendapatkan gambaran umum.

D3.js tidak berfungsi dengan baik dengan browser lama seperti IE8. Namun Anda selalu dapat menggunakan plugin seperti plugin aight untuk kompatibilitas lintas browser.

D3.js sebelumnya telah banyak digunakan di website seperti NYTimes, Uber dan Weather.com

Google Grafik

Google Charts juga memiliki banyak pengaturan konfigurasi yang membantu Anda mengubahnya penampilan grafis. Grafik dihasilkan menggunakan HTML5/SVG untuk memastikan kompatibilitas lintas browser dan portabilitas lintas platform ke iPhone, iPad, dan Android. Juga berisi VML untuk mendukung versi IE yang lebih lama.

JS grafik tinggi

Salah satu yang paling banyak manfaat yang besar Aplikasi HighchartsJS – kompatibilitas dengan browser lama seperti Penjelajah Internet 6. Browser standar gunakan SVG untuk merender grafik. Di IE lama, grafik dibuat melalui VML.

Meskipun HighchartsJS gratis keperluan pribadi, Anda perlu membeli lisensi untuk penggunaan komersial.

grafik fusi

Tidak seperti banyak perpustakaan, Fusioncharts menyediakan kemampuan untuk mengurai data JSON dan XML. Anda juga dapat mengekspor grafik ini ke 3 format yang berbeda: PNG, JPG, dan PDF.

Fusioncharts sangat kompatibel dengan browser lama seperti IE6. Dan karena alasan ini, perpustakaan ini menjadi salah satu perpustakaan yang paling disukai di banyak organisasi perdagangan.

Anda dapat menggunakan Fusioncharts versi watermark secara gratis baik dalam proyek pribadi maupun komersial. Namun, Anda perlu membeli lisensi untuk menghilangkan tanda air tersebut.

mengambang

Flot mendukung diagram batang, diagram sebar, diagram batang, diagram kolom, dan kombinasi apa pun dari jenis diagram ini. Juga kompatibel dengan browser lama seperti IE 6 dan Firefox 2.

Flot sepenuhnya gratis, dukungan komersial diberikan atas permintaan khusus kepada pengembang. Berikut adalah daftar contoh bagan yang dibuat di Flot.

amCharts

AmMaps adalah favorit saya dari tiga di atas. Menyediakan fitur seperti peta panas, menggambar garis, menambahkan teks ke peta, mengunggah ikon atau foto ke dalamnya bagian atas peta Anda, mengubah skala, dll.
amCharts menggunakan SVG untuk merender grafik yang hanya berfungsi di browser modern. Grafik mungkin tidak ditampilkan dengan benar di IE di bawah versi 9.

EJS Chart disediakan secara gratis dan versi berbayar. Versi gratis memiliki batasan yang tidak mengizinkan Anda menggunakan lebih dari 1 bagan per halaman dan lebih dari dua urutan (numerik) per bagan. Lihat detail harga.

grafik uv

UvCharts dibangun di perpustakaan D3.js. Proyek ini berjanji untuk menghilangkan semua nuansa kompleks pengkodean D3.js dan menyediakan implementasi grafik yang mudah tampilan standar. uvCharts dibuat menggunakan SVG, HTML dan CSS.

Kesimpulan

Saya harap Anda menikmati artikel ini. Semoga harimu menyenangkan.

Tag: Tambahkan tag

• Terjemahan

Hampir mustahil membayangkan sebuah dashboard tanpa diagram dan grafik. Mereka menampilkan statistik kompleks dengan cepat dan efisien. Selain itu, diagram yang baik juga meningkatkan keseluruhan desain situs web Anda.

Pada artikel ini, saya akan menunjukkan kepada Anda beberapa perpustakaan JavaScript terbaik untuk membuat bagan/diagram (dan tabel pivot). Perpustakaan ini akan membantu Anda membuat grafik yang indah dan dapat disesuaikan untuk proyek masa depan Anda.

Meskipun sebagian besar perpustakaan gratis dan dapat didistribusikan ulang, beberapa di antaranya memiliki versi berbayar dengan fungsionalitas tambahan.

D3.js - Dokumen yang berpusat pada data

Tidak seperti banyak pustaka JavaScript lainnya, D3.js tidak langsung dilengkapi dengan grafik bawaan. Namun, Anda dapat melihat daftar grafik yang dibuat dengan D3.js untuk mendapatkan gambaran umum.

D3.js tidak berfungsi dengan baik dengan browser lama seperti IE8. Namun Anda selalu dapat menggunakan plugin seperti plugin aight untuk kompatibilitas lintas browser.

D3.js sebelumnya telah banyak digunakan di website seperti NYTimes, Uber dan Weather.com

Google Grafik

Google Charts juga memiliki berbagai pengaturan konfigurasi yang dapat membantu Anda mengubah tampilan grafik Anda. Grafik dihasilkan menggunakan HTML5/SVG untuk memastikan kompatibilitas lintas browser dan portabilitas lintas platform ke iPhone, iPad, dan Android. Juga berisi VML untuk mendukung versi IE yang lebih lama.

JS grafik tinggi

Salah satu keuntungan terbesar menggunakan HighchartsJS adalah kompatibilitasnya dengan browser lama seperti Internet Explorer 6. Browser standar menggunakan SVG untuk merender grafik. Di IE lama, grafik dibuat melalui VML.

Meskipun HighchartsJS gratis untuk penggunaan pribadi, Anda perlu membeli lisensi untuk penggunaan komersial.

grafik fusi

Tidak seperti banyak perpustakaan, Fusioncharts menyediakan kemampuan untuk mengurai data JSON dan XML. Anda juga dapat mengekspor grafik ini dalam 3 format berbeda: PNG, JPG, dan PDF.

Fusioncharts sangat kompatibel dengan browser lama seperti IE6. Dan karena alasan ini, perpustakaan ini menjadi salah satu perpustakaan yang paling disukai di banyak organisasi perdagangan.

Anda dapat menggunakan Fusioncharts versi watermark secara gratis baik dalam proyek pribadi maupun komersial. Namun, Anda perlu membeli lisensi untuk menghilangkan tanda air tersebut.

mengambang

Flot mendukung diagram batang, diagram sebar, diagram batang, diagram kolom, dan kombinasi apa pun dari jenis diagram ini. Juga kompatibel dengan browser lama seperti IE 6 dan Firefox 2.

Flot sepenuhnya gratis, dukungan komersial diberikan atas permintaan khusus kepada pengembang. Berikut adalah daftar contoh bagan yang dibuat di Flot.

amCharts

AmMaps adalah favorit saya dari tiga di atas. Menyediakan fitur seperti peta panas, menggambar garis, menambahkan teks ke peta, memuat ikon atau foto ke bagian atas peta, mengubah skala, dll.
amCharts menggunakan SVG untuk merender grafik yang hanya berfungsi di browser modern. Grafik mungkin tidak ditampilkan dengan benar di IE di bawah versi 9.

Bagan EJS tersedia dalam versi gratis dan berbayar. Versi gratisnya memiliki batasan yang tidak memungkinkan Anda menggunakan lebih dari 1 bagan per halaman dan lebih dari dua urutan (numerik) per bagan. Lihat detail harga.

grafik uv

UvCharts dibangun di perpustakaan D3.js. Proyek ini berjanji untuk menghilangkan semua nuansa kompleks pengkodean D3.js dan menyediakan implementasi grafik yang tampak standar dengan mudah. uvCharts dibuat menggunakan SVG, HTML dan CSS.

Kesimpulan

Saya harap Anda menikmati artikel ini. Semoga harimu menyenangkan.

Jika Anda pernah bekerja dengan data apa pun, Anda pasti tahu betapa menyakitkannya angka. Tidak mudah untuk mengarungi semua angka-angka ini dan memahami artinya. Di sinilah visualisasi berperan dalam penyelamatan. Visualisasi memperjelas data dan membantu pengambil keputusan mengekstraksi wawasan yang dapat ditindaklanjuti dari data tersebut.

“Dataviz” adalah singkatan dari “visualisasi data”, yang tujuan utamanya adalah menyampaikan informasi secara jelas dan efektif kepada pengguna menggunakan grafik statistik, bagan, grafik informasi, dan tabel.

Sebagai pengembang kita harus menggunakan alat yang tepat untuk membuat bagan yang menarik dari data, memberikan jumlah detail yang sesuai tanpa mengganggu gambaran besarnya.

Ada banyak plugin jQuery yang tersedia yang dapat membantu Anda membuat dataviz interaktif untuk halaman web Anda. Tapi mana yang benar-benar berguna? Dalam artikel ini, saya menyebutkan favorit saya dan menyoroti relevansinya dalam situasi tertentu. Dengan cara ini, Anda tidak akan membuang waktu dan tenaga untuk mencari, dan Anda akan memiliki gambaran tentang pilihan Anda saat ini.

1. Grafik Fusi

Selain JavaScript Charts, FusionCharts juga menawarkan plugin jQuery yang mengemas semua kebaikan FusionCharts - desain cerdas, animasi, dan pengalaman interaktif yang kaya. Grafik berjalan dengan lancar di semua jenis perangkat termasuk PC, Mac, Perangkat Android, serta iPad dan iPhone. Ini juga kompatibel dengan browser hingga IE6.

Plugin jQuery ini memiliki beberapa fitur yang sangat canggih. Grafik dapat disajikan data JSON, data XML atau tabel HTML. Dengan menyajikan banyak peristiwa umum yang terjadi dalam grafik (berikut daftar lengkapnya), Anda akan berpeluang lebih besar untuk mengajak pendengar melakukan tindakan tertentu.

Berikut panduan penggunaan praktis untuk membantu Anda memulai plugin dan cuplikan kode sebenarnya yang dapat Anda gunakan. Contoh plugin dan kode juga tersedia di Github.

Dalam bahasa Denmark, flot (berima dengan “plot”) berarti elegan, menarik, mengesankan, dan itulah tujuan perpustakaan Flot. Mereka fokus pada pembuatan bagan dan grafik yang mudah digunakan, menarik, dan interaktif. Fitur interaktif termasuk menghidupkan dan mematikan loop, menggeser dan memperbesar, berinteraksi dengan data, dan perubahan otomatis ukuran. Fitur lainnya termasuk dukungan multi-sumbu, bagan multi-tingkat, dan rendering teks dengan Canvas, bukan HTML. Banyak fitur lain yang tersedia sebagai plugin.

Ada sejumlah video yang menunjukkan cara menggunakan Flot dan banyak contoh ilustrasi yang bisa Anda rujuk juga.

Lisensi: Sumber Terbuka. Gratis untuk penggunaan apa pun.

3. Grafik Tinggi

Highcharts adalah salah satu yang populer lainnya perpustakaan JavaScript untuk menggambar diagram. Ini dirilis pada tahun 2009 dan penggunaannya masih mendapatkan momentum. Dia menawarkan skema umum, peta, dan grafik saham.

Anda dapat mengunduh adaptor jQuery dari halaman rumah unduhan bersama dengan perpustakaan Highcharts itu sendiri. Ini memungkinkan Anda mempelajari semua fitur canggih tanpa harus berurusan dengan vanilla JavaScript.

Seperti FusionCharts, ia juga mendukung semua browser (termasuk IE6), perangkat dan platform. Komunitas sangat mendukung Highcharts dan Anda dapat menemukan semua plugin yang dikembangkan oleh komunitas di halaman ini. Fitur keren lainnya dari Highcharts adalah bagian demo, yang memungkinkan Anda memulai dengan sangat cepat.

Lisensi: Gratis untuk tujuan non-komersial, berbayar untuk tujuan komersial.

4. Morris.js

Morris.js adalah perpustakaan yang kuat dengan antarmuka yang bersih. Ini didasarkan pada jQuery dan perpustakaan Raphaël JavaScript. Tujuan utamanya adalah untuk menyediakan diagram indah yang mudah digunakan. Tipe bagan default mencakup garis, batang, area, dan donat. Ada beberapa contoh di perpustakaan yang dapat Anda lihat dengan kode yang akan menunjukkan cara memulai dan membuat grafik menarik dalam hitungan menit.

Lisensi: Lisensi BSD yang Disederhanakan.

5. CanvasJS jQuery

CanvasJS jQuery adalah plugin pembuatan bagan jQuery yang disertakan dengan CanvasJS. Saat menggunakan plugin jQuery ini, Anda bisa menggunakan semuanya fitur standar CanvasJS, bersama dengan serangkaian fitur lanjutan yang mencakup pembaruan dinamis, geser dan perbesar, peristiwa, dan ekspor sebagai gambar. Grafiknya cukup baik untuk kumpulan data besar dan paket dasar termasuk 24 berbagai jenis grafik, dan semuanya responsif.

Ini beberapa contoh yang baik dengan kode sumber yang secara jelas menunjukkan fitur pembuatan bagan, serta integrasi jQuery UI.

Lisensi: Gratis untuk tujuan nonkomersial, berbayar untuk tujuan komersial...

6. Sitoscape.js

Cytoscape.js tidak tampak seperti perpustakaan grafik rata-rata, tetapi cukup mengesankan sehingga layak dimasukkan dalam daftar ini. Berbeda dengan plugin lain yang telah kita bahas sejauh ini, Cytoscape benar-benar merupakan pustaka plot jQuery (yaitu membantu memvisualisasikan grafik atau jaringan). Ini dioptimalkan ketika mengubah data jaringan mentah menjadi grafik dan juga dapat menangani data dalam jumlah besar. Kompatibel dengan semua browser modern, CommonJS/NodeJS, jQuery dan Meteor/Suasana. Dia juga mendukung peristiwa sensorik dan isyarat standar. Untuk lebih lanjut daftar lengkap fungsinya, silakan merujuk ke halaman Cytoscape.js.

Dokumentasi Cytoscape.js menyertakan contoh kode nyata, bahkan untuk kasus interaktif dan set lengkap tes satuan.

Lisensi: Sumber Terbuka. Gratis untuk semua pengguna. (LGPL3+)

7. Sayang sekali

Terkadang Anda hanya memerlukan grafik kecil dari konten Anda, dan Peity adalah solusi sempurna untuk situasi seperti itu. Ini memungkinkan Anda dengan mudah mengonversi sejumlah kecil data menjadi diagram garis, batang, dan donat dengan satu baris kode. Mereka dalam bentuk svg dan oleh karena itu kompatibel dengan browser apa pun yang mendukung elemen svg, termasuk termasuk Chrome, Opera, Firefox, IE9+ dan Safari. Anda juga dapat menyesuaikan elemen visual bagan dan atur warna dinamis. Grafik dapat diperbarui untuk mencerminkan perubahan data. Acara juga didukung. Terlampir banyak contoh dengan kode aktual di halaman Github.

8. Diagram Lingkaran Mudah

Berbicara tentang kesederhanaan dan efisiensi, saya harus menyebutkan Easy Pie Chart. Ini adalah plugin jQuery yang hanya melakukan satu hal - membuat diagram lingkaran sederhana nilai-nilai individu. Ia menggunakan elemen kanvas untuk membuat bagan ini. Bagan mudah diatur dan hanya memerlukan beberapa baris kode. Mereka juga responsif dan berskala sesuai resolusi layar untuk menghasilkan grafik yang tajam, bahkan pada tampilan retina.

Plugin ini kompatibel dengan semua browser modern yang mendukung elemen kanvas. Di IE 8 dan yang lebih lama, Anda dapat membuat grafik menggunakan excanvas. Anda dapat melihat beberapa demo menarik di Github.

Lisensi: Open source di bawah lisensi MIT.

9.jqPlot

jqPlot adalah plugin jQuery yang memungkinkan Anda memasukkan plot sisi klien murni ke halaman web. jqPlot menawarkan 'pluggability' yang kuat karena semua perhitungan dan gambar - garis, sumbu, bayangan, kisi, dan sebagainya - dilakukan menggunakan visualisator plug-in. Anda dapat memperluas fungsionalitas untuk memproses peristiwa khusus, menambahkan tipe bagan baru, dan fungsi tambahan lainnya.

Pelajaran mendetail tentang penggunaan jqPlot tersedia di sini. Contoh grafik dan beberapa pengujian unit juga tersedia.

Lisensi: Proyek sumber terbuka. Lisensi ganda - MIT dan GPL versi 2.

10. Grafik Mini jQuery

1436351687jQuery-sparkline

jQuery Sparklines (mirip dengan Peity) memungkinkan Anda membuat bagan kecil sebaris dengan data yang disediakan langsung dalam HTML atau melalui JavaScript sebaris. Setiap contoh pada gambar di atas hanya membutuhkan satu baris kode untuk dibuat. Anda bahkan tidak perlu menulis kodenya sendiri. Ada pembuat kode (di bawah judul “Cobalah”) di mana Anda dapat memasukkan data dan mengatur parameter serta mendapatkan kode yang dibuat untuk Anda. Harap dicatat bahwa Anda tidak dapat menambahkan teks atau label ke grafik mini. Mereka dirancang untuk menunjukkan kecocokan dengan teks Anda. Jika Anda memerlukan anotasi atau fitur lainnya, lebih baik Anda menggunakan salah satu plugin yang telah kami bahas di atas.

Jika Anda ingin menggunakan plugin ini, terdapat dokumentasi terperinci tentang opsi, sintaksis, dan penggunaan.

Lisensi: Sumber Terbuka. Gratis untuk semua penggunaan.

11.jquery.Gantt

Sejauh ini kita telah membicarakan tentang plugin yang membuat grafik dan bagan yang familier, plugin yang akan membantu Anda dengan grafik jaringan, dan beberapa untuk grafik dan bagan mini bawaan. Namun jika Anda menginginkan dasbor dengan fitur manajemen proyek, Anda memerlukan diagram Gantt. Plugin jQuery.Gantt memungkinkan Anda memvisualisasikan diagram Gantt menggunakan Ajax untuk mengambil data format JSON. Fitur-fiturnya termasuk menggeser, memperbesar, mencari, banyak tugas, warna berbeda untuk setiap tugas, pelabelan hari libur, dan banyak lagi. Untuk mempelajari lebih lanjut tentang plugin ini, Anda dapat membaca dokumentasi mendetailnya, yang akan memberi tahu Anda tentang parameternya dan cara menggunakannya.

Jika Anda menyukai bagan Gantt, saya sarankan Anda membaca artikel “Membuat Bagan Gantt Anda Sendiri dengan Webix” oleh Sergey Laptick tentang cara membuat aplikasi bagan Gantt menggunakan kerangka Webix yang dikombinasikan dengan bagan Gantt JavaScript sumber terbuka yang disebut dhtmlxGantt. Ini layak dibaca.

Lisensi: Proyek sumber terbuka. Lisensi ganda - MIT dan GPL.

Kesimpulan

Daftar perpustakaan jQuery favorit saya untuk membuat plot - oleh setidaknya, yang saya gunakan telah berakhir. Mereka mencakup hampir semua jenis bagan, fungsi, dan pengaturan yang mungkin Anda perlukan.

Konversi tinggi!

Jika pelanggan atau klien Anda perlu menyampaikan segala jenis pelaporan, serta beberapa perbandingan, grafik paling umum akan banyak membantu Anda. Secara umum, mereka diciptakan untuk ini. Untuk mempermudah pencarian Anda, seperti biasa, saya mempersembahkan kepada Anda 9 pilihan perpustakaan berbagai grafik dalam Javascript. Grafik ini cukup fungsional dan juga memiliki animasi indah yang dapat dinikmati oleh setiap pengguna.

2. Chartist.JS

Perpustakaan grafik yang besar dengan dukungan desain adaptif. SVG juga digunakan dalam grafik.

3.c3js

Perpustakaan luar biasa dengan banyak contoh. Pada dasarnya, grafik ini sederhana baik tampilan maupun pemasangannya, tetapi sepenuhnya memenuhi tugas utamanya.

4. Armada

Ini Plugin JQuery untuk membuat grafik interaktif untuk situs. DI DALAM dalam hal ini di sini Anda dapat memperbesar, menambah dan menghapus berbagai elemen, menggeser, dan banyak lagi. Plugin ini hadir dengan banyak jenis grafik yang sudah ada di dalamnya.

5. Bagan

Ini adalah perpustakaan grafik dan diagram yang sangat besar dan luas yang dibuat oleh orang Cina. Dia mendukung jumlah yang sangat besar informasi.

6. Sayang sekali

Perpustakaan sederhana yang dengannya Anda dapat dengan mudah dan cepat menambahkan grafik biasa atau semacam diagram ke halaman web.

7.DCJS

Perpustakaan hebat lainnya yang melakukan apa yang seharusnya dilakukan. Hadiah animasi yang indah, fungsionalitas dan kemudahan instalasi.

8. Bagan Google

Anda dapat membuat grafik interaktif dengan menggunakan API Google. Ada juga galeri dengan diagram yang sudah dibuat untuk melihat apa yang dapat dilakukan perpustakaan ini.

9.NVD3

Mudah untuk menginstal dan mengkonfigurasi perpustakaan grafik dan bagan. Ambil saja dan instal.