Bina Graf Dinamik Cepat di D3 dengan Plottable.js

Percuma Perpustakaan D3.js adalah salah satu daripada banyak yang membolehkan anda mewujudkan grafik interaktif pada halaman. Walaupun D3 mungkin yang paling popular dari kumpulan, belajar menggunakannya bukanlah tugas yang mudah.

Itulah sebabnya Plottable.js adalah perpustakaan yang sangat berharga. Ia adalah projek sumber terbuka percuma dibina di atas D3.js, menjadikannya lebih mudah bagi sesiapa sahaja untuk membuatnya grafik data interaktif dari awal.

Perpustakaan ini mengendalikan semua kerja yang kotor, jadi anda boleh memberi tumpuan kepada spesifik seperti data. Plottable menghasilkan kod yang betul untuk saiz dan kedudukan sebarang carta yang anda pilih.

Setiap carta mempunyai Komponen sendiri dalam Plottable di mana anda boleh salin / tampal kod templat untuk membina semula carta sendiri. Sehingga penulisan ini, anda boleh memilih dari 10 graf plot gaya, termasuk graf bar, carta pai, plot bertaburan, dan plot kawasan.

Awak boleh membina semula Komponen secara individu dan menyesuaikan tetapan mereka secara dinamik. Dengan cara ini, anda boleh dengan mudah mengubah unsur interaktif, warna, animasi, kedudukan, saiz, dan apa sahaja yang anda perlukan.

The perpustakaan penuh boleh didapati di GitHub jika anda ingin menyemak imbas kod sumber dan memuat turun salinan.

Tetapi, cara terbaik untuk belajar adalah melalui contoh. Itulah sebabnya anda perlu melihat mereka graf sampel berjalan Plottable untuk melihat bagaimana ia bertindak dalam tindakan.

Setiap graf adalah sepenuhnya interaktif, dengan kod sumber untuk boot. Sekiranya anda ingin membina semula graf yang sama hanya salin / tampal kod JS dan ubah semula seperti yang diperlukan.

Saya mempunyai dua kegemaran peribadi dari laman web mereka: Kalender Heatmap dimodelkan selepas papan aktiviti GitHub dan Carta yang disegerakkan dengan ciri pemilihan dinamik.

Jika anda tidak pernah menggunakan D3.js sebelum itu, anda akan berjuang untuk belajar perpustakaan ini. Terutama, kerana ia ditulis dalam TypeScript, jadi anda mungkin mahu mengambilnya juga. Kod terakhir ialah disusun menjadi JavaScript ES5, jadi ia sepatutnya bekerja di semua pelayar utama.

Sekiranya anda bersedia menyelam, lihatlah mereka Halaman tutorial penuh dengan sumber berguna. Anda akan mempelajari semua yang anda perlukan untuk memulakan dengan Plottable dan untuk membuat grafik berasaskan web yang dinamik dari awal.