• Перевод

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

В этой статье я покажу вам некоторые из лучших 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.

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

Теги: Добавить метки

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

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

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

Здравствуйте, уважаемые читатели a! Диаграммы являются одним из лучших способов отображения данных и гораздо более информативными, чем таблицы. В этой статье рассмотрим пример построения диаграмм с помощью отличного javascript плагина — Chart.js . Для построения диаграмм, гистограмм, линейных графиков, круговых диаграммы и много другого плагин использует . В качестве примера использования chart.js рассмотрим набор из 3 элементов, один будет показывать количество покупателей вымышленного продукта в течение 6 месяцев — это будет график, второй покажет, из каких стран клиенты — это будет круговая диаграмма и наконец мы будем использовать гистограмму, чтобы показать прибыль за этот период.

Подключение

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

1 2 3 4 5 6 7 8 9 10

Chart.js демо

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

Использование Рисуем график

Чтобы нарисовать линейную диаграмму, нам нужно создать графический элемент HTML, в котором можно будет с помощью Chart.js сделать график:

Задаем размеры элемента и указываем идентификатор.

1 2 3 4 5 6 7 8 9 10 11 12 13

var buyers = document.getElementById ("buyers" ) .getContext ("2d" ) ; var buyerData = { labels : [ "Январь" , "Февраль" , "Март" , "Апрель" , "Май" , "Июнь" ] , datasets : [ { fillColor : "rgba(172,194,132,0.4)" , strokeColor : "#ACC26D" , pointColor : "#fff" , pointStrokeColor : "#9DB86D" , data : [ 200 , 155 , 100 , 250 , 305 , 250 ] } ] }

С помощью класса Chart определяем линейную диаграмму.

Теперь задаем параметры и данные для отображения:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

var countries= document.getElementById ("countries" ) .getContext ("2d" ) ; var pieData = [ { value: 20 , color: "#878BB6" } , { value : 40 , color : "#4ACAB4" } , { value : 10 , color : "#FF8153" } , { value : 30 , color : "#FFEA88" } ] ;

Для более «точечной» настройки также можно использовать опции.

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

1. jqPlot — Универсальный и расширяемый JQuery Plugin для построения графиков

jqPlot — JQuery Плагин для построения графиков на Javascript.
jqPlot производит красивые линии, бары и круговые диаграммы с большим количеством функций:
Многочисленные стили диаграмм.
Данные на оси с настраиваемым форматированием.
До 9 осей Y.
Поворот текста оси.
Автоматическое вычисление линии тренда.
Всплывающие подсказки.
Простота использования.

2. Библиотека визуализации Dygraphs

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

Особенности:
Отображение временных рядов без использования внешних серверов или флэш-анимации
Работает в Internet Explorer (с помощью excanvas)
Малый размер (69kb)
Отображает значения при наведении курсора мыши
Интерактивное масштабирование
Регулируемый период усреднения
Совместимость с API визуализацией Google
http://dygraphs.com/

3. Highcharts — Интерактивные графики JavaScript для вашего сайта

Highcharts является библиотекой для постройки графиков, написанная на чистом JavaScript, предлагая интерактивные диаграммы для вашего веб-сайта или веб-приложения. Highcharts в настоящее время поддерживает линии, сплайны, области, areaspline, колонки, бар, пирог, разброс, угловые датчики, arearange, areasplinerange, columnrange и полярные типы диаграмм.

4. JQuery с эффектом прокрутки колесика мыши

Не использует PNG или JPG спрайты.
Обрабатывает события сенсора, колесика мыши, и клавиатуры.
http://anthonyterrien.com/knob/

5. Стильный индикаторы на CSS3

Стильные, анимированные индикаторы с использованием CSS3.
http://www.red-team-design.com

6. Highcharts с JQuery

Highcharts это совместимая с JQuery и Mootools, библеотека для построения графиков. Она совместима со всеми стандартными веб-браузерами, для построения графа использует JSON данные. Поддерживает несколько типов графа линии, сплайны, область, areaspline, колонки, бар, pie и точечную диаграмму.
Highcharts.com

7. Анимированный граф на HTML5 и JQuery

Прекрасная, интерактивная круговая диаграмма с использованием новейших технологий HTML5. Не использует Flash.

8. Экспериментальный граф на CSS3

Этот метод является примером постройки экспериментальных графиках на CSS3, без JavaScript и изображений. Использование CSS3 селекторов поистине впечатляет: трансформации, градиенты и переходы в использовании. К сожалению не поддерживается в IE.

9. Еще одна диаграмма на JQuery и HTML5

Visualize плагин анализирует ключевые элементы содержания в структурированной HTML таблице, и использует HTML5, что превратить их в диаграмму или график. Например, в таблице данных строки могут служить графиком баров, линий или клинев. Visualize также автоматически проверяет максимальное и минимальное значения в таблице и использует их для расчета оси х значения для линии и гистограммы. Наконец, плагин включает в себя два различных стиля CSS — светлый и темный которые могут быть использованы как есть, или могут служить в качестве отправной точки для настройки диаграмм и графиков.

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

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

Почему AnyChart

AnyChart - коммерческая библиотека, она бесплатна для любого некоммерческого использования. Очень хорошо зарекомендовала себя и находится на рынке уже более 10 лет. Первоначально использовался Flash-based AnyChart, но потом перешел на чистый JavaScript с SVG / VML-рендерингом.

API AnyChart очень гибкий и позволяет изменять практически любой аспект диаграммы «на лету» во время выполнения.

AnyChart - семейство продуктов

• AnyChart - предназначен для создания интерактивных графиков всех основных типов
• AnyStock - предназначен для визуализации больших наборов данных на основе даты / времени
• AnyMap - для карт географии и мест
• AnyGantt - для решений по управлению проектами и ресурсами (Gantt, ресурс, диаграммы PERT)

Однако эти библиотеки можно рассматривать как одну большую библиотеку диаграмм JavaScript (HTML5). Все они имеют один и тот же API, все диаграммы сконфигурированы практически одинаково, они имеют общие темы, настройки и способы загрузки данных.

Быстрый запуск с AnyChart

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

Вот образец HTML-шаблона, который вы можете использовать:

html, body, #container { width: 100%; height: 100%; } AnyChart Basic Example // AnyChart code here

Третий - это добавление кода JavaScript, который создает простую интерактивную диаграмму столбцов одной серии:

Anychart.onDocumentLoad(function() { // create chart and set data var chart = anychart.column([ ["Winter", 2], ["Spring", 7], ["Summer", 6], ["Fall", 10] ]); // set chart title chart.title("AnyChart Basic Sample"); // set chart container and draw chart.container("container").draw(); });

И это все! Вот что у нас получилось.

Легко, правда? Но все становится проще и гибче в AnyChart, когда дело доходит до установки данных. Перейдем к следующему разделу, чтобы более подробно рассмотреть это.

Получение данных в AnyChart

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

Данные из массива

Фактически, вы уже видели первый способ в разделе «Быстрый старт с AnyChart» выше. Используя этот метод, вы объявляете свои данные в виде массива массивов, а AnyChart делает все остальное. Этот метод является кратким, а также простым в форматировании и использовании.

Anychart.onDocumentLoad(function() { // create chart and set data // as Array of Arrays var chart = anychart.pie([ ["Peter", 5], ["John", 7], ["James", 9], ["Jacob", 12] ]); chart.title("AnyChart: Array of Arrays"); chart.container("container").draw(); });

Массив объектов

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

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

Anychart.onDocumentLoad(function() { // create chart and set data // as Array of Objects // the biggest point is marked with individually conigured marker var chart = anychart.line([ {x: "Winter", value: 5}, {x: "Spring", value: 9, marker: {enabled: true, type: "star5", fill: "Gold"}}, {x: "Summer", value: 7}, {x: "Fall", value: 1} ]); chart.title("AnyChart: Array of Objects"); chart.container("container").draw(); });

Создание диаграмм нескольких рядов

Графики с несколькими сериями представляют собой диаграммы, которые позволяют отображать максимумы и минимумы множества наборов данных, а также сравнивать их. При создании нескольких диаграмм серии с AnyChart вы можете использовать ранее введенные методы, но дополнительно укажите имена вашей серии. Двигатель AnyChart позаботится обо всем остальном.

Anychart.onDocumentLoad(function() { // create chart and set data // as Array of Arrays var chart = anychart.line() chart.data({header: ["#", "Euro (€)", "USD ($)", "Pound (£)"], rows:[ ["Winter", 5, 7, 4], ["Spring", 7, 9, 6], ["Summer", 9, 12, 8], ["Fall", 12, 15, 9] ]}); chart.title("AnyChart: Multi-Series Array of Arrays"); chart.legend(true); chart.container("container").draw(); });

Несколько рядов: массив объектов

Теперь давайте посмотрим, как вы можете создать диаграмму с несколькими сериями, используя массив объектов.

Примечание . При использовании таких объектов вы можете применять любые имена полей для значений.

Вот как это можно сделать:

Anychart.onDocumentLoad(function() { // create chart and set data // as Array of Objects var chart = anychart.column(); chart.data({header: ["#", "Euro (€)", "USD ($)", "Pound (£)"], rows:[ {x: "Winter", usd: 5, eur: 4, pound: 3}, {x: "Spring", usd: 3, eur: 3, pound: 3}, {x: "Summer", usd: 2, eur: 5, pound: 3}, {x: "Fall", usd: 4, eur: 2, pound: 3} ]}); chart.title("Array of Objects"); chart.legend(true); chart.container("container").draw(); });

Отображение данных из таблицы HTML

Другой способ загрузки данных в AnyChart - использовать таблицу, которая уже существует на странице. Это может быть чрезвычайно эффективным способом визуализации ключевых точек другого скучного списка цифр. Чтобы сделать эту работу, вам нужно будет добавить сценарий адаптера данных вместе с библиотекой диаграмм.

Затем есть два варианта: вы можете извлекать данные из таблиц, созданных с тегом

, или с тегами и CSS. Давайте посмотрим на обоих.

Тег таблицы
Если вы решите реализовать параметр тега таблицы, ваш код может выглядеть так:

Со следующим JavaScript:

Anychart.onDocumentLoad(function() { // create chart and set data var chart = anychart.column(); // parse table var tableData = anychart.data.parseHtmlTable("#htmlTable"); chart.data(tableData); chart.legend(true); // set chart container and draw chart.container("container").draw(); });

И вот на что это похоже на практике.

Отображаемые данные с использованием обычной разметки

Теперь давайте посмотрим, как это работает при создании таблицы с тегами и CSS:

... ...

Со следующим JavaScript:

Anychart.onDocumentLoad(function() { // create a chart and set the data var chart = anychart.column(); var tableData = anychart.data.parseHtmlTable(".table", ".row", ".cell p", ".heading .cell p", ".title"); chart.data(tableData); chart.legend(true); // set chart container and draw chart.container("container").draw(); });

Вы видите, что можно установить селектора CSS для строк, заголовков и заголовков таблицы. В принципе, вам не нужно настраивать саму таблицу - вы можете настроить сценарий и получить данные из разметки.

Работа с данными JSON

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

Таким образом, вы создадите диаграмму комбинаций столбцов и сплайнов из данных JSON. В этом (и следующих примерах) требуется сценарий адаптера данных, упомянутый ранее.

Anychart.onDocumentReady(function() { // JSON data var json = { "chart": { "type": "column", "title": "AnyChart: Data from JSON", "series": [{ "seriesType": "Spline", "data": [ {"x": "P1", "value": "128.14"}, {"x": "P2", "value": "112.61"}, {"x": "P3", "value": "163.21"}, {"x": "P4", "value": "229.98"}, {"x": "P5", "value": "90.54"} ] }, { "seriesType": "Column", "data": [ {"x": "P1", "value": "90.54"}, {"x": "P2", "value": "104.19"}, {"x": "P3", "value": "150.67"}, {"x": "P4", "value": "120.43"}, {"x": "P5", "value": "200.34"} ] }], "container": "container" } }; // set JSON data chart = anychart.fromJson(json); // draw chart chart.draw(); });

Работа с данными XML

И если вам не нравится JSON, вы можете придерживаться XML, поскольку диаграммы AnyChart также не имеют проблем с данными в формате XML. Как и в JSON, AnyChart также предоставляет свои собственные XML-схемы. XML также хорошо подходит, когда вы собираетесь хранить настройки и данные в целом. И снова, AnyChart имеет ряд методов сериализации XML, которые могут быть полезны при экспорте.

Вот пример кода полярной диаграммы с несколькими сериями, созданной из настроек XML:

Anychart.onDocumentReady(function() { // XML settings and data var xml = "" + "" + "" + ""+ "" + "" + ""+ ""+ ""+ ""+ ""+ "" + "" + ""+ ""+ ""+ ""+ ""+ ""+ ""+ ""+ ""; // Set settings and data as XML chart = anychart.fromXml(xml); // draw chart chart.draw(); });

Работа с данными в формате CSV

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

Самый простой способ загрузить CSV-файл в диаграмму JS AnyChart - это если файл фактически разделен запятой, содержит аргумент в первом столбце и не имеет заголовка, то есть выглядит примерно так:

Eyeshadows,249980 Eyeliner,213210 Eyebrow pencil,170670 Nail polish,143760 Pomade,128000 Lip gloss,110430 Mascara,102610 Foundation,94190 Rouge,80540 Powder,53540

Anychart.onDocumentReady(function () { anychart.data.loadCsvFile("https://cdn.anychart.com/charts-data/data_csv.csv", function (data) { // create chart from loaded data chart = anychart.bar(data); // set title chart.title("AnyChart from CSV File"); // draw chart chart.container("container").draw(); }); });

Если поля в вашем файле CSV упорядочены по-другому, данные могут быть загружены в набор данных и переназначены (я объясню, как это работает в следующей статье, посвященной более продвинутому использованию библиотеки AnyChart). Вы также можете настраивать разделители во время загрузки данных в набор данных.

Вывод

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

Все материалы вы можете найти в исходнике