Izradite grafikone podataka s JavaScriptom s Billboard.js

Grafika i slika igraju ključnu ulogu u poboljšanju web sadržaja. Pomoću moderne tehnologije lako je dodati prilagođene slike poput SVG ikona na svoju stranicu.

Ali još jedna iznenađujuća vizuala koju možete izgraditi od početka je web grafikon.

To vam može pomoći vizualno iscrtajte podatke tako da Vaši posjetitelji mogu brzo pregledavati relevantne informacije. I umjesto da sami sami šifrirate grafikon, možete koristiti biblioteku poput Billboard.js za sve teške radove.

To je zapravo izgrađen na vrhu D3 koji je JavaScript biblioteka vizualizacije podataka. To je jednostavno najpopularniji onaj koji ga čini najsigurnijom ovisnošću koju možete tražiti.

S Billboard.js možete brzo i jednostavno pristupiti D3 API-ju. Primarni cilj Billboarda je jednostavnost upotrebe, čineći je dostupnom svakome. Iako to pomaže da imate neko iskustvo s JavaScriptom, sigurno ne morate biti stručnjak.

Samo napomenite da cijela codebase koristi ES6 sintaksu koja može zbuniti manje iskusne JS-ove.

Sve dok ste vi znati kako sastaviti kod trebala bi biti dobro. Mi smo zapravo pokrili nekoliko vrućih značajki iz ES6 ako želite saznati više.

Svi tehnički detalji ovog dodatka mogu izgledati lijepo. Ali vjerojatno želiš znati što to može učiniti.

Pogledajte demo stranicu i kliknite neke od primjera uživo.

Naći ćete sve, od grafikona pita da biste raspršili parcele i prilagođene animirane stupčaste grafikone.

S Billboard.js imate potpunu kontrolu nad vašim podacima. Vi kontrolirate kako se pojavljuje na stranici, kako je strukturirana i koju vrstu korisničkog sučelja / UX značajki dodajete (ako ih ima).

To je doista fantastična biblioteka grafikona i to je jedan od najlakših za preuzimanje. Da biste saznali više, pogledajte projektni GitHub repo.

Također možete kopati u ovaj isječak na CodePen ako želite igrati s kodom u vašem pregledniku.