Javascript рисование графиков. Обзор javascript библиотек для построения графиков. Отображаемые данные с использованием обычной разметки

• Перевод

Практически невозможно представить себе информационную панель без диаграмм и графиков. Они быстро и эффективно отображают сложные статистические данные. Более того, хорошая диаграмма также улучшает общий дизайн вашего сайта.

В этой статье я покажу вам некоторые из лучших JavaScript библиотек для построения диаграмм/схем (и сводных таблиц). Эти библиотеки помогут вам в создании красивых и настраиваемых графиков для ваших будущих проектов.

Хотя большинство библиотек являются бесплатными и свободно распространяемыми, для некоторых из них есть платные версии с дополнительным функционалом.

D3.js – документы, ориентированные на данные Сегодня, когда мы задумываемся о графиках, то первое, что приходит в голову – это D3.js Являясь open source проектом, D3.js, вне всякого сомнения, дарит много полезных возможностей, которых не хватает большинству существующих библиотек. Такие возможности как “Enter and Exit”, мощные переходы, и синтаксис, схожий с jQuery или Prototype, делают его одной из лучших JavaScript библиотек для создания графиков и диаграмм. В D3.js они генерируются посредством HTML, SVG и CSS.

В отличие от многих других JavaScript библиотек, D3.js не поставляется с заранее созданными графиками прямо из коробки. Однако вы можете взглянуть на перечень графиков, созданных на D3.js , чтобы получить общее представление.

D3.js не работает должным образом со старыми браузерами, такими как IE8. Но вы всегда можете применить такие плагины как aight plugin для кроссбраузерной совместимости.

D3.js ранее широко использовался на таких вебсайтах как NYTimes , Uber и Weather.com

Google Charts

Google Charts – JavaScript библиотека, которую я регулярно использую для простого и лёгкого создания графиков. Предоставляет множество предварительно созданных диаграмм, таких как комбинированные гистограммы, столбчатые диаграммы, календарные графики, секторные диаграммы, гео схемы, и др.

В Google charts также имеется множество конфигурационных настроек, которые помогают изменить внешний вид графика. Графики формируются с помощью HTML5/SVG добы обеспечить кроссбраузерную совместимость и кроссплатформенную портируемость на IPhone, IPad и Android. Также содержит VML для поддержки старых IE версий.

Highcharts JS

Highcharts JS – ещё одна весьма популярная библиотека для построения графиков. Комплектуется большим количеством анимации разнообразного типа, способной привлечь множество внимания к вашему сайту. Как и другие библиотеки, HighchartsJS содержит множество предварительно созданных диаграмм: сплайновых, фигурных, комбинированных, столбчатых, гистограмм, круговых, точечных и пр.

Одно из самых больших преимуществ применения HighchartsJS – совместимость со старыми браузерами, такими как Internet Explorer 6. Стандартные браузеры используют SVG для рендеринга графиков. В устаревшем IE графики строятся через VML.

Хотя HighchartsJS и бесплатен для персонального использования, вам необходимо приобрести лицензию для коммерческого применения.

Fusioncharts

Fusioncharts – одна из наиболее старых JavaScript библиотек, которая была впервые выпущена в 2002 году. Графики генерируются посредством HTML5/SVG и VML для лучшей портируемости и совместимости.

В отличие от множества библиотек, Fusioncharts предоставляет возможность парсинга как JSON данных, так и XML. Вы также можете экспортировать эти графики в 3 разных формата: PNG, JPG и PDF.

Fusioncharts хорошо совместим со старыми браузерами, такими как IE6. И по этой причине он стал одной из наиболее предпочитаемых библиотек во множестве торговых организаций.

Вы можете бесплатно использовать версию Fusioncharts с водяным знаком как в личных так и в коммерческих проектах. Однако, вам необходимо приобрести лицензию , чтобы избавиться от водяного знака.

Flot

Flot – JavaScript библиотека для JQuery, позволяющая создавать графики/диаграммы. Одна из старейших и наиболее популярных диаграммных библиотек.

Flot поддерживает линейчатые, точечные, гистограммы, столбчатые и любые комбинации из этих видов диаграмм. Также совместим со старыми браузерами, такими как IE 6 и Firefox 2.

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

amCharts

amCharts , несомненно, одна из наиболее красивых диаграммных библиотек. Она в полной мере разделилась на 3 независимых вида: JavaScript Charts, Maps Charts (amMaps) и Stock charts.

AmMaps – мой любимый из этих трёх, что указаны выше. Предоставляет такие возможности, как теплокарты, рисование линий, добавление текста на карту, загрузка иконок или фотографий в верхнюю часть вашей карты, изменение масштаба и пр.
amCharts использует SVG для рендеринга графиков который работает только в современных браузерах. Графики могут не правильно отображаться в IE ниже 9й версии.

EJS Chart предоставляется в бесплатной и платной версиях. Бесплатная версия имеет ограничение, не позволяющее вам использовать более 1 графика на странице и более двух (числовых) последовательностей на графике. Ознакомьтесь с ценовыми подробностями .

uvCharts

uvCharts – JavaScript библиотека с открытым исходным кодом, заявляется о наличии более 100 конфигурационных опций. У неё имеются графики 12 различных стандартов прямо из коробки.

UvCharts построен на D3.js библиотеке. Этот проект обещает устранить все сложные нюансы кодинга D3.js и обеспечить лёгкую реализацию графиков стандартного вида. uvCharts генерируется посредством SVG, HTML и CSS.

Заключение Теперь выбор наилучшей диаграммной библиотеки для своих будущих проектов остаётся только за вами. Разработчики, которым нужен полный контроль над графиками, определённо выберут D3.js Практически все вышеуказанные библиотеки обзавелись хорошей поддержкой на форумах Stackoverflow.

Надеюсь вам понравилась эта статья. Хорошего дня.

Если Вашим покупателям или же клиентам нужно передать какую либо отчётность, а так же некоторые сравнения, Вам очень сильно помогут самые обычные графики. В общем они и созданы для этого. Чтобы как всегда облегчить Вам задачу поисков, представляю Вам подборку из 9 библиотек различных графиков на Javascript. Данные графики достаточно функциональны, а так же имеют красивую анимацию, которая будет приятна любому пользователю.

2. Chartist.JS

Большая библиотека графиков с поддержкой адаптивного дизайна. Так же в графиках используется SVG.

3. c3js

Отличная библиотека с огромным количеством примеров. В основном данные графики просты как на вид так и в установке, но основную свою задачу они полностью выполняют.

4. Флот

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

5. Echart

Это огромная и обширная библиотека графиков и диаграмм созданная китайцами. Она поддерживает огромное количество информации.

6. Peity

Простая библиотека с помощью которой Вы очень просто и быстро можете добавить на веб страницу обычный график или какую нибудь диаграмму.

7. DC JS

Ещё одна отличная библиотека, которая делает то, что от неё и требуется. Присутствует красивая анимация, функциональность и простота установки.

Влад Мержевич

На сайтах иной раз приходится использовать разные диаграммы, что позволяют наглядно и доступно донести данные до пользователя. Раньше подобные графики делали в Excel, а затем вставляли на сайт картинкой. Но мы ведь живём в век информационных технологий, поэтому хочется вставить диаграмму быстро, просто, да ещё чтобы она была при этом интерактивной и красивой. И вот пришёл Гугл и дал нам такой сервис.

Набор возможных графиков доступен на этой странице. Для каждого графика есть множество параметров, которые позволяют настроить всё по своему вкусу: цвета, положение, заголовки, анимацию и многое другое. Можно обойтись и минимальным набором, если нет желания вдаваться в эти тонкости или когда полностью устраивает стандартный вид графика.

Рассмотрю только два типа графиков - круговую и линейную диаграмму. Остальные типы подключаются по аналогии и разобравшись как добавлять один график, уже легче работать и с другими.

Круговая диаграмма

Такая диаграмма напоминает торт, разрезанный на разного размера куски. Общая сумма всех частей составляет 100%, части делят круг пропорционально своим значениям.

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

Пример 1. Круговая диаграмма

Круговая диаграмма google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Газ", "Объём"], ["Азот", 78.09], ["Кислород", 20.95], ["Аргон", 0.93], ["Углекислый газ", 0.03] ]); var options = { title: "Состав воздуха", is3D: true, pieResidueSliceLabel: "Остальное" }; var chart = new google.visualization.PieChart(document.getElementById("air")); chart.draw(data, options); }

Результат примера показан на рис. 1.

Рис. 1. Вид круговой диаграммы

В том месте документа, куда мы добавляем диаграмму, вставляем следующий код.

Ширину и высоту диаграммы задаём через стили и добавляем идентификатор для работы скрипта. Этот же идентификатор должен быть указан в document.getElementById .

Параметры диаграммы состоят из двух блоков: собственно данные для отображения (переменная data ) и настройки (переменная options ). Первая строка в data задаёт названия последующих колонок и хотя она никак не выводится, без неё отображение происходит некорректно. В options пишется заголовок диаграммы, также можно указать трёхмерность и другие настройки, все они являются необязательными и если не заданы, то принимаются по умолчанию.

Диаграмма получается интерактивной, её части подсвечиваются если навести на них курсор или на легенду.

Примеры, список параметров и описание круговой диаграммы доступны по этому адресу: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

Гистограмма - это столбчатая диаграмма, которая удобна для сравнения разных значений между собой. В качестве примера возьмём добычу нефти в XIX веке в России и США (рис. 2). На оси абсцисс (горизонтальная ось) нанесены годы, на оси ординат (вертикальная ось) - добыча нефти в тысячах тонн. Высота прямоугольников соответствует указанному значению.

Рис. 2. Гистограмма

Принцип создания этого типа диаграммы аналогичен предыдущему - добавляем тег , связываем его со скриптом, в котором хранятся данные для графика и параметры отображения (пример 2).

Пример 2. Гистограмма

Гистограмма google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Год", "Россия", "США"], ["1860", 1.3, 70], ["1885", 2000, 3120], ["1901", 12170, 9920] ]); var options = { title: "Добыча нефти", hAxis: {title: "Год"}, vAxis: {title: "Тыс. тонн"} }; var chart = new google.visualization.ColumnChart(document.getElementById("oil")); chart.draw(data, options); }

Для начала добавляем тег и указываем ему желаемую ширину и высоту с помощью стилей. Также важен идентификатор через который скрипт будет вставлять выбранный график в элемент . Сам скрипт в сравнении с предыдущим примером сохраняет свою структуру и состоит из двух редактируемых частей - собственно данные для отображения на графике и различные его настройки. Через параметры hAxis и vAxis добавим для наглядности заголовки осей.

Резюме

Удобно, что сервис ориентирован на пользователей разного уровня подготовки. Можно скопировать прилагающиеся примеры и сразу же получить готовый график стандартного вида. Те пользователи, что станут досконально разбираться во множестве параметров, будут вознаграждены графиками сделанными по их вкусу и подобию дизайна сайта.

Сами графики выводятся достаточно оперативно, к тому же вызываемые файлы при первой загрузке кэшируются, поэтому последующее отображение графиков на сайте происходит быстрее. Поддерживаются все браузеры, включая старые версии Internet Explorer.

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

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

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

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

Есть много доступных jQuery плагинов, которые могут помочь вам создать интерактивную dataviz для вашей веб-страницы. Но какие из них действительно полезны? В этой статье я назвал своих фаворитов, и выделил их уместность в определенных ситуациях. Таким образом, вы не потратите время и усилия на поиски, и у вас будет представление текущих возможностей выбора.

1. FusionCharts

Помимо JavaScript Charts, FusionCharts также предлагает плагин jQuery, который упаковывает все добро FusionCharts - смарт-дизайн, анимацию и богатый интерактивный опыт. Графики плавно работают плавно на всех типах устройств, включая ПК, Mac, Android устройства, а также iPads и iPhones. Он также обратно совместим с браузерами до IE6.

Этот плагин jQuery имеет некоторые действительно мощные функции. Графики могут быть представлены данными JSON, XML данными или таблицами HTML. Представлены многие распространенные события, которые происходят в графике (здесь полный список), у вас будет больше шансов, что слушатели выполнят определенные действия.

Здесь удобное руководство по использованию, которое поможет вам начать работу с плагином и реальными фрагментами кода, которые можно использовать. Образцы плагина и кода также доступны на Github.

В датском языке, 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.

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-библиотек для построения графиков - по крайней мере, тех, которые я использовал - подошел к концу. Они охватывают почти каждый тип диаграммы, функциональность и настройки, которые могут вам понадобиться.

Высоких конверсий!

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

Есть несколько способов добавить график или диаграмму на веб-страницу. Первый, о котором вы, вероятно, уже подумали, это нарисовать его в любом графическом редакторе. Но это не самый удобный и быстрый вариант. Куда проще и быстрее сделать график на JavaScript, где всего то придется задать необходимые параметры, вид и поместить его на страницу.

В этой статье, мы расскажем вам о 10 сервисах и инструментах , которые помогут в создании графиков и диаграмм на JavaScript. Другие способы создания вы найдете в рубрике « ».

Bluff
Чтобы нарисовать линейный график с помощью этого сервиса нужно всего лишь скопировать несколько строчек кода, задать нужные параметры и добавить текст. Код настолько прост и понятен, что разобраться в нем вы сможете буквально за несколько секунд.

С помощью PlotKit можно строить диаграммы и графики, которые будут корректно отображаться во всех браузерах. На сайте вы найдете документацию, примеры видов графиков и краткое руководство (с описанием всех параметров и настроек), чтобы быстро начать работу.

Этот сервис позволяет делать великолепные визуальные функций. Вводите уравнение, например 2*sin(4*x)^(x+4), нажимаете «Enter» и функция готова. После этого вам остается только скопировать url и вставить его на свою страницу.

Мощнейший инструмент для построения таблиц, графиков и диаграмм на jQuery. На сайте вы найдете примеры всех видов графиков, а так же подробное описание параметров и этапов настройки.

Flot
jQuery библиотека для построения графиков от Google. На этом можно больше ничего не писать, все уже и так понятно (: Но все же отметим, что сервис предлагает огромное количество красивых примеров с гибкой и простой настройкой.

Позволяет создавать диаграммы и таблицы гистограмм данных. Для построения нужно ввести необходимые данные и нажать на кнопку «Calculate». Далее скопировать код и скачать небольшой скрипт. При желании все данные можно вводить в самом коде.

Сервис предоставляет 6 видов диаграмм (круговая диаграмма, линейный график, динамическая диаграмма и 3 вида гистограмм). Есть описание настроек, параметров и подробные примеры всех видов диаграмм.

Raphaël
Raphaël - это небольшая JavaScript библиотека, которая значительно упрощает работу при создании графиков и диаграмм. Это самый мощный инструмент из всех представленных в этом обзоре. Вам будет проще посмотреть возможности библиотеки самим, чем читать описание о ее возможностях.

Plotr
Библиотека для построения диаграмм на Mootools. Отличный инструмент, который представляет информацию и красивом и понятном виде. А для его настройки нужно только изменить или добавить значения.

Возможности этого сервиса позволяют строить 3D графики. Из функционала стоит выделить простую настройку, быструю работу скрипта и возможность построения графиков косинусного и синусного видов.