Główna » zestaw narzędzi » Twórz wykresy danych oparte na JavaScript z Billboard.js

    Twórz wykresy danych oparte na JavaScript z Billboard.js

    Grafika i grafika odgrywają istotną rolę w ulepszaniu treści internetowych. Dzięki nowoczesnej technologii dodawanie niestandardowych grafik, takich jak ikony SVG, jest tak łatwe.

    Ale kolejnym zaskakującym obrazem, który możesz zbudować od podstaw, jest wykres internetowy.

    To może ci pomóc wykresuj dane wizualnie dzięki czemu odwiedzający mogą szybko przejrzeć istotne informacje. Zamiast samemu kodować wykres, możesz użyć biblioteki takiej jak Billboard.js, aby wykonać wszystkie ciężkie prace.

    W rzeczywistości jest on zbudowany na D3, która jest biblioteką wizualizacji danych JavaScript. Jest to najbardziej popularny program, dzięki któremu jest to najbezpieczniejsza zależność, o jaką możesz poprosić.

    Dzięki Billboard.js możesz szybko i łatwo uzyskać dostęp do D3 API. Podstawowym celem Billboardu jest łatwość użycia, dzięki czemu jest dostępna dla każdego. Mimo, że pomaga to mieć pewne doświadczenie w JavaScript, na pewno nie musisz być ekspertem.

    Wystarczy zauważyć, że cała baza kodowa używa składni ES6, co może być mylące dla mniej doświadczonych twórców JS.

    Tak długo jak ty wiedzieć, jak skompilować kod powinieneś być w porządku. Właściwie omówiliśmy kilka gorących funkcji z ES6, jeśli chcesz dowiedzieć się więcej.

    Wszystkie szczegóły techniczne dotyczące tej wtyczki mogą wydawać się ładne. Ale prawdopodobnie chcesz wiedzieć co to może zrobić.

    Obejrzyj stronę demonstracyjną i kliknij kilka przykładów na żywo.

    Znajdziesz tu wszystko, od wykresów kołowych po wykresy rozproszone i niestandardowe animowane wykresy słupkowe.

    Z Billboard.js masz pełna kontrola nad danymi. Kontrolujesz, jak to wygląda na stronie, jak jest zorganizowana i jaki typ dodawanych funkcji UI / UX (jeśli w ogóle).

    To naprawdę fantastyczna biblioteka wykresów i jest jedną z najłatwiejszych do odebrania. Obejrzyj repozytorium projektu GitHub, aby dowiedzieć się więcej.

    Możesz także zagłębić się w ten fragment na CodePen, jeśli chcesz zabawić się kodem w przeglądarce.