Створіть з даними Billboard.js графічні дані з JavaScript

Графіка і графіка відіграють важливу роль у покращенні веб-контенту. За допомогою сучасних технологій так легко додати користувацькі візуальні зображення, такі як іконки SVG.

Але ще однією дивовижною візуалізацією, яку можна створити з нуля, є веб-діаграма.

Це може допомогти вам графічно відображати дані візуально щоб ваші відвідувачі могли швидко переглядати відповідну інформацію. А замість того, щоб самостійно кодувати графік, ви можете використовувати бібліотеку, подібну до Billboard.js, щоб виконати всю важку роботу.

Це фактично побудовано поверх D3, який є бібліотекою візуалізації даних JavaScript. Це легко найпопулярніший там, що робить його найбезпечнішим залежність ви можете попросити.

З Billboard.js ви можете швидко і легко отримати доступ до API D3. Основною метою Billboard є простота використання, що робить її доступною для будь-кого. Хоча це допомагає мати певний досвід роботи з JavaScript, вам, звичайно, не потрібно бути експертом.

Відзначимо, що вся кодова база використовує синтаксис ES6, який може заплутати менш досвідчених розробників JS.

Поки ви знати, як скомпілювати код Ви повинні бути добре. Насправді ми охопили кілька гарячих функцій від ES6, якщо ви хочете дізнатися більше.

Всі технічні подробиці про цей плагін може здатися гарним. Але ви, мабуть, просто хочете знати що це може зробити.

Погляньте на демонстраційну сторінку і клацніть на деяких прикладах.

Ви знайдете все, починаючи від кругових діаграм, щоб розкидати ділянки та користувальницькі анімаційні графіки.

З Billboard.js у вас є повний контроль над вашими даними. Ви керуєте тим, як вона відображається на сторінці, як вона структурована, і який тип функцій користувальницького інтерфейсу / UX додаєте (якщо такі є).

Це дійсно фантастична бібліотека діаграм, і вона одна з найпростіших підібрати. Щоб дізнатися більше, ознайомтеся з проектом GitHub repo.

Ви також можете вкопатися в цей фрагмент на CodePen, якщо ви хочете грати з кодом у вашому браузері.