Если вы трудились с любыми видами данных, вы понимаете, какими мучительными смогут быть цифры. Непросто пробраться через все эти цифры и осознать, что они означают. Это случай, в то время, когда визуализация приходит на помощь.
Визуализация проясняет эти и оказывает помощь лицам, принимающим решения извлечь из них действенные идеи.
“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 и библиотеке Raphael 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-библиотек для построения графиков – по крайней мере, тех, каковые я применял – подошел к концу. Они охватывают практически любой тип диаграммы, настройки и функциональность, каковые смогут вам пригодиться.
Высоких конверсий!
Случайные статьи:
Chart.js — Создание линейной диаграммы
Подборка похожих статей:
-
Как использовать данные для принятия лучших решений по продукту?
В данной статье мы предоставим вам подробное управление по применению бизнес-аналитики для вашего продукта. Вы определите, какими задачами ваша компания…
-
Почему ruby on rails является одним из лучших среди первых языков программирования для дизайнеров
Основное преимущество любого веб-дизайнера – это быть в состоянии осознать – а также организовать – то, что происходит «за кулисами». По крайней мере,…
-
Используем лучшие cms для оформления сайта визитки
Как CMS воздействует на выдачу сайта в поисковых машинах Web Builder Adobe Muse Выбор CMS для сайта визитки обычно есть самый сложным этапом в ходе его…
-
H2h-маркетинг: как стать лучшим партнером для клиента
Марина Омельченко Директор по формированию, Петербург Бизнесэто люди, это разнообразные лица, принимающие ответы. На кого ориентироваться поставщикам,…