Създайте графики с данни с JavaScript и Billboard.js

Графиките и визуалните материали играят жизненоважна роля за подобряване на уеб съдържанието. С модерната технология е толкова лесно да добавите персонализирани визуализации като SVG икони в страницата си.

Но друга изненадваща визуализация, която можете да създадете от нулата, е уеб графика.

Това може да ви помогне графика на данните визуално така вашите посетители могат бързо да прегледат подходящата информация. И вместо да кодирате графика, можете да използвате библиотека като Billboard.js, за да извършите всички тежки операции.

Това всъщност се основава на D3, която е библиотека за визуализация на данни на JavaScript. Това е лесно най-популярният там, което го прави най-сигурната зависимост, която можеш да поискаш.

С Billboard.js имате бърз и лесен достъп до D3 API. Основната цел на Billboard е лекота на използване, правейки го достъпно за всеки. Въпреки, че помага да имате някакъв опит с JavaScript, със сигурност не е нужно да сте експерт.

Само отбележете, че цялата codebase използва ES6 синтаксис, който може да обърква по-малко опитни JS разработчици.

Докогато ти знаят как да съставят кода трябва да сте добре. Ние всъщност покрихме няколко горещи функции от ES6, ако искате да научите повече.

Всички технически подробности за този плъгин може да изглежда добре. Но вероятно просто искате да знаете какво може да направи това.

Разгледайте демонстрационната страница и кликнете върху някои от примерите на живо.

Ще откриете всичко - от графики на пая за разпръскване на графики и персонализирани анимирани бар графики.

С Billboard.js имате пълен контрол над данните ви. Вие контролирате начина, по който се появява на страницата, как е структурирана и какъв тип функции на UI / UX добавяте (ако има такива).

Това е наистина фантастична библиотека с диаграми и това е една от най-лесните за набиране. Разгледайте GitHub repo на проекта, за да научите повече.

Можете също така да копаете в този фрагмент на CodePen, ако искате да играете с кода в браузъра си.