Beranda » Toolkit » Buat Grafik Data yang Didukung JavaScript Dengan Billboard.js

    Buat Grafik Data yang Didukung JavaScript Dengan Billboard.js

    Grafik dan visual memainkan peran penting dalam meningkatkan konten web. Dengan teknologi modern sangat mudah untuk menambahkan visual kustom seperti ikon SVG ke halaman Anda.

    Tapi visual mengejutkan lain yang bisa Anda buat dari awal adalah bagan web.

    Ini dapat membantu Anda grafik data secara visual sehingga pengunjung Anda dapat dengan cepat membaca informasi terkait. Dan alih-alih mengkodekan grafik sendiri, Anda dapat menggunakan perpustakaan seperti Billboard.js untuk melakukan semua pekerjaan berat.

    Ini sebenarnya dibangun di atas D3 yang merupakan perpustakaan visualisasi data JavaScript. Ini dengan mudah yang paling populer di luar sana menjadikannya dependensi teraman yang bisa Anda minta.

    Dengan Billboard.js Anda dapat mengakses D3 API dengan cepat dan mudah. Tujuan utama dari Billboard adalah kemudahan penggunaan, membuatnya dapat diakses oleh siapa saja. Meskipun memang membantu memiliki pengalaman dengan JavaScript, Anda tentu tidak perlu menjadi ahli.

    Perhatikan saja seluruh basis kode menggunakan sintaks ES6 yang dapat membingungkan bagi pengembang JS yang kurang berpengalaman.

    Selama Anda tahu cara mengkompilasi kode kamu harus baik-baik saja. Kami sebenarnya membahas beberapa fitur panas dari ES6 jika Anda ingin mempelajari lebih lanjut.

    Semua detail teknis tentang plugin ini mungkin terlihat bagus. Tapi Anda mungkin hanya ingin tahu apa yang bisa dilakukan.

    Lihat halaman demo dan klik beberapa contoh langsung.

    Anda akan menemukan semuanya, mulai dari grafik pie hingga plot pencar dan grafik batang animasi khusus.

    Dengan Billboard.js yang Anda miliki kontrol penuh atas data Anda. Anda mengontrol bagaimana hal itu muncul pada halaman, bagaimana itu terstruktur, dan apa jenis fitur UI / UX yang Anda tambahkan (jika ada).

    Ini benar-benar pustaka bagan yang fantastis dan ini salah satu yang termudah untuk diambil. Lihat repo GitHub proyek untuk mempelajari lebih lanjut.

    Anda juga dapat menggali potongan ini di CodePen jika Anda ingin mempermainkan kode di browser Anda.