Создание диаграмм данных на основе JavaScript с помощью Billboard.js

Графика и визуальные эффекты играют жизненно важную роль в улучшении веб-контента. С современными технологиями так легко добавить пользовательские визуальные элементы, такие как иконки SVG, на свою страницу..

Но еще одним удивительным визуальным эффектом, который вы можете создать с нуля, является веб-диаграмма..

Это может помочь вам Наглядно представьте данные так что ваши посетители могут быстро просмотреть соответствующую информацию. И вместо того, чтобы писать код самостоятельно, вы можете использовать библиотеку вроде Billboard.js, чтобы выполнить всю тяжелую работу..

Это на самом деле построено на D3, который является библиотекой визуализации данных JavaScript. Это, пожалуй, самый популярный из них, что делает его самой безопасной зависимостью, которую вы могли бы попросить.

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

Просто обратите внимание, что вся кодовая база использует синтаксис ES6, что может сбить с толку менее опытных разработчиков JS.

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

Все технические детали этого плагина могут показаться приятными. Но вы, вероятно, просто хотите знать что это может сделать.

Взгляните на демонстрационную страницу и кликните на некоторых живых примерах.

Вы найдете все, от круговых диаграмм до точечных диаграмм и пользовательских анимированных гистограмм.

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

Это действительно фантастическая библиотека графиков, и ее легче всего найти. Взгляните на репозиторий GitHub проекта, чтобы узнать больше.

Вы также можете покопаться в этом фрагменте на CodePen, если хотите поиграть с кодом в своем браузере..