Если вы работали с любыми видами данных, вы знаете, какими мучительными могут быть цифры. Непросто пробраться через все эти цифры и понять, что они означают. Это случай, когда визуализация приходит на помощь. Визуализация проясняет данные и помогает лицам, принимающим решения извлечь из них действенные идеи.
“Dataviz” является аббревиатурой “визуализации данных”, основной задачей которой является четкая и эффективная передача информации пользователям с помощью статистических графиков, диаграмм, информационной графики и таблиц.
Как разработчики, мы должны использовать правильные инструменты для создания выразительных диаграмм из данных, обеспечивая соответствующее количество деталей, не отвлекая от картины в целом.
Есть много доступных jQuery плагинов, которые могут помочь вам создать интерактивную dataviz для вашей веб-страницы. Но какие из них действительно полезны? В этой статье я назвал своих фаворитов, и выделил их уместность в определенных ситуациях. Таким образом, вы не потратите время и усилия на поиски, и у вас будет представление текущих возможностей выбора.
1. FusionCharts
Помимо JavaScript Charts, FusionCharts также предлагает плагин jQuery, который упаковывает все добро FusionCharts – смарт-дизайн, анимацию и богатый интерактивный опыт. Графики плавно работают плавно на всех типах устройств, включая ПК, Mac, Android устройства, а также iPads и iPhones. Он также обратно совместим с браузерами до IE6.
Этот плагин jQuery имеет некоторые действительно мощные функции. Графики могут быть представлены данными JSON, XML данными или таблицами HTML. Представлены многие распространенные события, которые происходят в графике (здесь полный список), у вас будет больше шансов, что слушатели выполнят определенные действия.
Здесь удобное руководство по использованию, которое поможет вам начать работу с плагином и реальными фрагментами кода, которые можно использовать. Образцы плагина и кода также доступны на Github.
Лицензия: Бесплатно для некоммерческих целей, платно для коммерческих.
2. Flot
В датском языке, flot (рифмуется с “plot”) означает элегантный, привлекательный, впечатляющий и это именно то, что библиотека Flot стремится сделать. Они сконцентрированы на создании простых в использовании, привлекательных и интерактивных диаграмм и графиков. Интерактивные функции включают в себя включение и выключение циклов, панорамирование и масштабирование, взаимодействие с данными и автоматическое изменение размера. Другие особенности включают поддержку нескольких осей, многоярусные диаграммы и текст рендеринга с Canvas вместо HTML. Многие другие функции доступны как плагины.
Есть ряд видео, рассказывающих о том, как использовать Flot, и много иллюстративных примеров, к которым вы также можете обратиться.
Лицензия: С открытым исходным кодом. Бесплатно для любых применений.
3. Highcharts
Highcharts является еще одной популярной JavaScript библиотекой для построения диаграмм. Она была выпущена в 2009 году и использование до сих пор набирает обороты. Она предлагает общие схемы, карты и биржевые диаграммы.
Вы можете скачать адаптер jQuery с главной страницы загрузки вместе с самой библиотекой Highcharts. Это позволяет изучить все мощные функции, без необходимости иметь дело с vanilla JavaScript.
Как FusionCharts, она также поддерживает все браузеры (в том числе IE6), устройства и платформы. Сообщество очень поддерживает Highcharts и вы можете найти все плагины, разработанные сообществом на этой странице. Еще одной крутой особенностью Highcharts является демо раздел, который позволяет вам очень быстро начать работу.
Лицензия: Бесплатно для некоммерческих целей, платно для коммерческих.
4. Morris.js
Morris.js это мощная библиотека с чистым интерфейсом. Она основана на jQuery и библиотеке Raphaël JavaScript. Основная цель заключается в предоставлении красивых диаграмм, которые легко использовать. Типы диаграмм по умолчанию включают линейную, брусковую, диаграмму с областями и кольцевую. В библиотеке есть несколько примеров, на которые вы можете взглянуть при помощи кода, и которые покажут, как начать и создать привлекательные диаграммы в течение нескольких минут.
Лицензия: Упрощенная лицензия BSD.
5. CanvasJS jQuery
CanvasJS jQuery – jQuery плагин графиков, который поставляется с CanvasJS. При применении этого jQuery плагина, вы можете использовать все стандартные функции CanvasJS, наряду с расширенным набором функций, который включает динамические обновления, панорамирование и масштабирование, события и экспорт в виде изображений. Графики достаточно хороши для больших наборов данных и базовый пакет включает в себя 24 различных типов диаграмм, и все они являются отзывчивыми.
Вот некоторые хорошие примеры с исходным кодом, которые наглядно демонстрируют особенности построения диаграмм, а также интеграцию jQuery UI.
Лицензия: Бесплатно для некоммерческих целей, платно для коммерческих..
6. Cytoscape.js
Cytoscape.js не похожа на обычную библиотеку графиков, но она достаточно внушительна и заслуживает включения в этот список. В отличие от других плагинов, которые мы обсуждали до сих пор, Cytoscape – действительно библиотека графиков jQuery (т.е. помогает визуализировать графики или сети). Она оптимизирована, если дело касается преобразования сырых сетевых данных в графы и также может обрабатывать большие объемы данных. Совместима со всеми современными браузерами, CommonJS/NodeJS, jQuery и Meteor/Atmosphere. Она также поддерживает сенсорные события и стандартные жесты. Для более полного списка функций, пожалуйста, обратитесь к странице Cytoscape.js.
Документация Cytoscape.js включает в себя примеры реального кода, даже для интерактивных случаев и полный набор модульных тестов.
Лицензия: С открытым исходным кодом. Бесплатно для всех пользователей. (LGPL3+)
7. Peity
Иногда нужны просто небольшие графы с вашим контентом, а Peity является идеальным решением для таких ситуаций. Она позволяет с легкостью конвертировать небольшие объемы данных в линейные, брусковые, кольцевые диаграммы с одной строкой кода. Они в виде svg и, следовательно, совместимы с любым браузером, поддерживающим svg элемент, в том числе Chrome, Opera, Firefox, IE9+ и Safari. Вы также можете настроить визуальные элементы диаграммы и установить динамические цвета. Графики могут быть обновлены, чтобы отразить изменения в данных. События также поддерживаются. Прилагаются многие примеры с реальным кодом на странице Github.
Лицензия: С открытым исходным кодом под лицензией MIT.
8. Easy Pie Chart
Говоря о простоте и эффективности, я должен упомянуть Easy Pie Chart. Это плагин jQuery, который выполняет только одну функцию – он создает простые круговые диаграммы для отдельных значений. Он использует элемент canvas, чтобы сделать эти диаграммы. Графики легко настроить, для этого требуется всего несколько строк кода. Они также отзывчивы и масштабируются в соответствии с разрешением экрана, чтобы предоставить четкие графики, даже на дисплеях retina.
Плагин совместим со всеми современными браузерами, которые поддерживают элемент canvas. На IE 8 и более старых версиях, вы можете создать диаграммы, используя excanvas. Вы можете посмотреть некоторые интересные демо на Github.
Лицензия: С открытым исходным кодом под лицензией MIT.
9. jqPlot
jqPlot это плагин jQuery, который позволяет вставлять чистые клиентские диаграммы в веб-страницы. jqPlot может похвастаться сильной ‘pluggability’ заключающейся в том, что все расчеты и чертежи – линии, оси, тени, сетки и так далее – сделаны с помощью подключаемых визуализаторов. Вы можете расширить функциональные возможности для обработки пользовательских событий, добавления новых типов графиков и других дополнительных функций.
Подробные уроки использование jqPlot доступны здесь. Также доступны примеры графиков и некоторых модульных тестов.
Лицензия: Проект с открытым исходным кодом. Двойная лицензия – MIT и GPL версия 2.
10. jQuery Sparklines
1436351687jQuery-sparklines
jQuery Sparklines (похоже на Peity) позволяет создавать небольшие встроенные диаграммы с данными, которые поставляются непосредственно в HTML или через встроенный JavaScript. Создание каждого примера на картинке выше занимает всего одну строку кода. Вам даже не нужно писать код самостоятельно. Существует генератор кода (под заголовком “Попробуйте его”), где вы можете ввести данные и установить параметры и получить сгенерированный для вас код. Обратите внимание, что вы не можете добавить текст или метки в спарклайны. Они предназначены для того, чтобы показывать соответствия с вашим текстом. Если вам нужны аннотации или другие функции, вам лучше использовать один из плагинов, о которых мы рассказывали выше.
В случае если вы хотите использовать этот плагин, есть подробная документация вариантов, синтаксиса и использования.
Лицензия: С открытым исходным кодом. Бесплатно для всех применений.
11. jQuery.Gantt
До сих пор мы говорили о плагинах, которые создают привычные графики и диаграммы, плагины, которые помогут вам с сетевыми графиками, а также некоторые для встроенных мини-графиков и диаграмм. Но если вам нужна панель с функциями управления проектами, вам понадобятся графики Gantt. Плагин jQuery.Gantt позволяет визуализировать диаграммы Gantt, используя Ajax для получения данных в формате JSON. Функции включают в себя панорамирование, масштабирование, поиск, несколько задач, различные цвета для каждой задачи, маркировка праздников и другое. Чтобы узнать больше об этом плагине, вы можете прочитать его подробную документацию, которая расскажет о его параметрах и о том, как его использовать.
Если вам нравятся диаграммы Gantt, то я предлагаю вам прочитать статью “Создание собственного графика Gantt с Webix”, написанную Sergey Laptick, о том, как создать приложение диаграммы Gantt, используя фреймворк Webix в сочетании с открытым исходным кодом диаграммы JavaScript Gantt, называемый dhtmlxGantt. Ее стоит прочесть.
Лицензия: Проект с открытым исходным кодом. Двойная лицензия – MIT и GPL.
Выводы
Список моих любимых jQuery-библиотек для построения графиков – по крайней мере, тех, которые я использовал – подошел к концу. Они охватывают почти каждый тип диаграммы, функциональность и настройки, которые могут вам понадобиться.
Высоких конверсий!
