Диаграммы js. Создание графиков и диаграмм на JavaScript. Создание диаграмм нескольких рядов

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

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

Все 3 примера анимированных графиков можно посмотреть ниже:

СкачатьКак использовать красивые графики в своих целях?

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

Создаются такие красивые графики с помощью библиотеки — Chartist.js .

А с применением они "оживают" и притягивают внимание. Теперь представьте реакцию посетителей при виде такого на обычном лендинге! Ведь уже никого не удивишь, а вот подобные элементы всегда будут повышать качество сайта.

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

1 этап. Подключаем необходимые стили и скрипты

Файлы стилей и скриптов можно скачать и разместить на своем хостинге, но гораздо удобнее просто вставить 2 строчки в HTML и подключить все, что нужно:

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

3 этап. Задаем значения графика (JS)

Для начала я приведу сразу полный код, который создает вот такой график:

А вот тот, собственно, сам код:

JAVASCRIPT КОД

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

new Chartist.Line (".chart1" , { labels: [ "День 1" , "День 2" , "День 3" , "День 4" , "День 5" ] , series: [ [ 12 , 9 , 3 , 8 , 4 ] , [ 2 , 1 , 4.7 , 5.5 , 8 ] ] } , { fullWidth: true , chartPadding: { right: 50 } } ) ;

Пройдемся по каждой строке, чтобы у Вас было полное понимание этого небольшого JS-скрипта. А если Вы будете понимать, за что отвечает каждая строка, то сможете изменить под себя любые значения.

• Строка 1 — в этой строке обратите внимание на значение между одинарными кавычками. Здесь указывается блока, в котором у нас будет находится график или диаграмма.
• Строка 2 — через запятую в одинарных кавычках прописываем названия одного деления по оси X.
• Строки с 3 по 6 — здесь задаются значения по оси Y для каждой линии на графике. Одна строка значений в квадратных скобках (в этом скрипте 4-я и 5-я строки) соответствует одной линии.
• Строка 8 — указав значение true , мы растянули график на всю ширину "блока-родителя".
• Строки с 9 по 11 — задаем внутренний отступ справа. Это делается для того, чтобы описание делений по оси X не обрезалось и помещалось в один блок.

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

Пример 1. Анимированный график

Но как же создать такой график, как на изображении выше (изображение анимированное, если у Вас нет анимации, то подождите, пока загрузится) выше?

Для этого необходимо лишь дописать некоторые свойства элементов на готовом графике. Так как весь график состоит из SVG элементов, то нам лишь необходимо решить какой из них мы хотим анимировать.

Чтобы анимировать две линии, как я это сделал в этом примере, нужно добавить следующий CSS код в Ваш файл стилей:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

/*График #1*/ .chart1 .ct-chart .ct-series .ct-series-a .ct-line { stroke: #F04D3A ; stroke-width: 5px ; stroke-dasharray: 5px 5px ; animation : dashoffset-seven 200ms infinite linear ; } /*Цвет точек первой линии*/ .chart1 .ct-chart .ct-series .ct-series-a .ct-point{ stroke: #B22819 ; } .chart1 .ct-chart .ct-series .ct-series-b .ct-line { stroke: #4DB543 ; stroke-width: 5px ; stroke-dasharray: 5px 5px ; animation : dashoffset 200ms infinite linear ; } /*Цвет точек второй линии*/ .chart1 .ct-chart .ct-series .ct-series-b .ct-point{ stroke: #0FB500 ; } /*Анимация движения штриховых точек*/ @keyframes dashoffset { 0% { stroke-dashoffset: 7px ; } 100% { stroke-dashoffset: 0px ; } }

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

Пример 2. Анимация выделения главной линии на графике

Здесь (на изображении выше) присутствует анимация. Если Вы ее не видите, то, возможно, у Вас просто не загрузилась картинка, просто подождите.

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

/*График #2*/ /*Цвет, толщина и стиль первой линии*/ .chart2 .ct-chart .ct-series .ct-series-a .ct-line { stroke: #949494 ; stroke-width: 5px ; } .chart2 .ct-chart .ct-series .ct-series-a .ct-point{ stroke: #656565 ; } /*Цвет, толщина и стиль второй линии*/ .chart2 .ct-chart .ct-series .ct-series-b .ct-line { stroke: #6765B5 ; stroke-width: 5px ; animation : width-pulse 2s infinite; } .chart2 .ct-chart .ct-series .ct-series-b .ct-point{ stroke: #403CB5 ; } /*Цвет, толщина и стиль третьей линии*/ .chart2 .ct-chart .ct-series .ct-series-c .ct-line { stroke: #949494 ; stroke-width: 5px ; } /*Цвет точки для третьей линии на графике*/ .chart2 .ct-chart .ct-series .ct-series-c .ct-point{ stroke: #656565 ; } /*Анимация пульсации для выделения линии на графике*/ @keyframes width-pulse { 0% { stroke-width: 6px ; stroke: #403CB5 ; } 50% { stroke-width: 14px ; stroke: #E40DE4 ; } 100% { stroke-width: 6px ; stroke: #403CB5 ; } }

Пример 3. Анимация в двух направлениях

Ну и последний пример с анимацией CSS3 — это анимация на графике в двух направлениях.

Для такого эффекта необходимо использовать следующий CSS код и анимацию:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

/*График #3*/ /*Цвет, толщина и стиль второй линии*/ .chart3 .ct-chart .ct-series .ct-series-b .ct-line { stroke: #E44A4A ; stroke-width: 5px ; stroke-dasharray: 30px 5px ; stroke-linecap: round; animation : dasharray-craziness 10s infinite linear ; } /*Цвет точки для второй линии на графике*/ .chart3 .ct-chart .ct-series .ct-series-b .ct-point{ stroke: #E40D0D ; } /*Цвет, толщина и стиль первой линии*/ .chart3 .ct-chart .ct-series .ct-series-a .ct-line { stroke: #949494 ; stroke-width: 5px ; } /*Цвет точки для первой линии на графике*/ .chart3 .ct-chart .ct-series .ct-series-a .ct-point{ stroke: #656565 ; } /*Анимация в двух направлениях на графике*/ @keyframes dasharray-craziness { 0% { stroke-dasharray: 7px 2px ; } 80% { stroke-dasharray: 7px 100px ; stroke-width: 10px } 100% { stroke-dasharray: 7px 2px ; } }

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

В этой статье мы будем создавать интерактивный график, используя CSS3 и jQuery . Мы будем использовать популярную библиотеку для jQuery - Flot. Flot – это библиотека (на чистом javascript), предназначенная для рисования графиков, и используемая в jQuery. Этот плагин прост, но в то же время достаточно мощен, чтобы создавать красивые и интерактивные графики. Для большей информации о библиотеке обратитесь к официальной документации по flot.

Разметка HTML

Для начала создадим разметку HTML для графика. Создадим блок с классом graph-wrapper . Внутри этого блока расположим два блока. Первый блок с классом graph-info , будет содержать легенду графиков и кнопки для переключения между внешним видом графиков. Второй блок содержит графики (линейный и столбиковый).

HTML Visitors Returning Visitors jQuery и библиотека Flot

Давайте подключим javascript. Сперва подключим библиотеку jquery (например, от google). Вы можете использовать ту же ссылку или загрузить файл c библиотекой jQuery на ваш сервер. Затем загрузите файлы Flot и подключите jquery.flot.min.js.

HTML $(document).ready(function () { // Graph scripts here }); Данные для графика

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

jQuery var graphData = [{ // Visits data: [ , , , , , , , , , ], color: "#71c73e" }, { // Returning Visits data: [ , , , , , , , , , ], color: "#77b7c5", points: { radius: 4, fillColor: "#77b7c5" } } ]; Загружаем графики

Сейчас мы будем загружать два графика, один линейный, другой столбиковый. Оба имеют несколько пользовательских параметров (цвет, тень и т.д.). Также оба используют данные из переменной graphData .

jQuery // Линейный $.plot($("#graph-lines"), graphData, { series: { points: { show: true, radius: 5 }, lines: { show: true }, shadowSize: 0 }, grid: { color: "#646464", borderColor: "transparent", borderWidth: 20, hoverable: true }, xaxis: { tickColor: "transparent", tickDecimals: 2 }, yaxis: { tickSize: 1000 } }); // Bars $.plot($("#graph-bars"), graphData, { series: { bars: { show: true, barWidth: .9, align: "center" }, shadowSize: 0 }, grid: { color: "#646464", borderColor: "transparent", borderWidth: 20, hoverable: true }, xaxis: { tickColor: "transparent", tickDecimals: 2 }, yaxis: { tickSize: 1000 } }); Стили для блока-обертки и его потомков

Предварительно сбросим стили по умолчанию для всех элементов в блоке-родителе графиков (хорошая практика начинать верстку сайта с подключений сброса стилей).

CSS /* Resets */ .graph-container, .graph-container div, .graph-container a, .graph-container span { margin: 0; padding: 0; } Добавим градиент и закругленные углы обертке, кнопкам и подсказкам. CSS /* Gradinet and Rounded Corners */ .graph-container, #tooltip, .graph-info a { background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f9f9f9)); background: -webkit-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: -o-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: linear-gradient(to bottom, #ffffff 0%,#f9f9f9 100%); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

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

CSS /* Graph Container */ .graph-container { position: relative; width: 550px; height: 300px; padding: 20px; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.1); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,.1); box-shadow: 0px 1px 2px rgba(0,0,0,.1); } .graph-container > div { position: absolute; width: inherit; height: inherit; top: 10px; left: 25px; } .graph-info { width: 590px; margin-bottom: 10px; }

Легенда и кнопки

Давайте начнем с добавления базовых стилей для ссылок. Для легенд графиков создадим небольшой круг с таким же цветом как у самих графиков (линейный/столбиковый). Чтобы создать круг будем использовать псевдо-селектор:before . Этот селектор позволит нам вставить контент до содержимого элемента, к которому он добавляется.

CSS .graph-info a { position: relative; display: inline-block; float: left; height: 20px; padding: 7px 10px 5px 30px; margin-right: 10px; text-decoration: none; cursor: default; } CSS /* Color Circles */ .graph-info a:before { position: absolute; display: block; content: ""; width: 8px; height: 8px; top: 13px; left: 13px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .graph-info .visitors { border-bottom: 2px solid #71c73e; } .graph-info .returning { border-bottom: 2px solid #77b7c5; } .graph-info .visitors:before { background: #71c73e; } .graph-info .returning:before { background: #77b7c5; }

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

Наконец предотвратим схлопывание блоков.

CSS /* Clear Floats */ .graph-info:before, .graph-info:after, .graph-container:before, .graph-container:after { content: ""; display: block; clear: both; } Переключатель графиков

На этом шаге добавим событие клика для кнопок “столбиковый” и “линейный”. При загрузке спрячем столбиковый график, затем при клике по “столбиковой” кнопке делаем график видимым. Чтобы увидеть линейный график, пользователь должен кликнуть по “линейной” кнопке.

jQuery $("#graph-bars").hide(); $("#lines").on("click", function (e) { $("#bars").removeClass("active"); $("#graph-bars").fadeOut(); $(this).addClass("active"); $("#graph-lines").fadeIn(); e.preventDefault(); }); $("#bars").on("click", function (e) { $("#lines").removeClass("active"); $("#graph-lines").fadeOut(); $(this).addClass("active"); $("#graph-bars").fadeIn().removeClass("hidden"); e.preventDefault(); }); Текст

Добавляем шрифт и стили для текста.

CSS #tooltip, .graph-info a { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; font-size: 12px; line-height: 20px; color: #646464; } .tickLabel { font-weight: bold; font-size: 12px; color: #666; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

Спрячем стили для первого и последнего значения по оси y:

CSS .yAxis .tickLabel:first-child, .yAxis .tickLabel:last-child { display: none; } Подсказка

Добавим подсказку внутрь элемента body. Подсказка будет блоком с id равным tooltip . Позиция для подсказки будет вычисляться на основе позиции точек графика. Подсказка будет показываться лишь при наведении курсора на точки графиков.

jQuery function showTooltip(x, y, contents) { $("" + contents + "").css({ top: y - 16, left: x + 20 }).appendTo("body").fadeIn(); } var previousPoint = null; $("#graph-lines, #graph-bars").bind("plothover", function (event, pos, item) { if (item) { if (previousPoint != item.dataIndex) { previousPoint = item.dataIndex; $("#tooltip").remove(); var x = item.datapoint, y = item.datapoint; showTooltip(item.pageX, item.pageY, y + " visitors at " + x + ".00h"); } } else { $("#tooltip").remove(); previousPoint = null; } });

Затем добавим подсказке абсолютное позиционирование, отступы, границы и установим display в none .

CSS #tooltip { position: absolute; display: none; padding: 5px 10px; border: 1px solid #e1e1e1; }

Заключение

На этом все. Мы закончили, используя CSS3 и плагин flot, настраивать графики. Успехов.

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

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

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

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

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

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

- Библиотеки графиков и диаграмм

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

Am Charts – это сборка диаграмм на Flash для ваших веб-сайтов, или продуктов, основывающихся на веб-технологиях. Am Charts позвояет извлекать информацию из простых файлов CSV или XML, или же они могут считывать динамические данные и преобразовывать их с помощью PHP, .NET, Java, Ruby on Rails, Perl, ColdFusion и многие другие языки программирования.

Deensoft – это новая бесплатная библиотека, использующая Prototype и Canvas для создания привлекательных диаграмм. Сильными мотиваторами для этой библиотеки послужили Flot, Flotr и PlotKit. Целью библиотеки является максимальная свобода в оформлении и легкости применения.

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

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

Filamentgroup с помощью javascript извлекает данные из таблиц HTML и генерирует диаграммы, с помощью элемента холста в HTML 5. Теперь у инструмента есть сторонний код, который упакован в роли нового плагина для jQuery.

Flot – javascript-библиотека для безупречного черчения в jQuery. С помощью этого инструмента можно производить графические чертежи. Акцент идет на простоту в использовании (вы можете пользоваться множеством опций), привлекательный вид, и другие полезные функции.

В общем, Fly Charts – это набор SWF-файлов, которые предоставляют возможность визуализации данных. С помощью Fly Charts вы можете создавать компактные, интерактивные и привлекательные диаграммы, буквально, за минуту. Инструменту не требуется никаких процессов установки, и он может работать с любым языком скриптинга.

Fusion Charts без труда можно использовать в динамических веб-приложениях, статичных веб-сайтах, а также его можно комбинировать с javascript для генерирования приложений AJAX. Демо могут отлично отобразить вам то, что вы сможете делать бесплатно в Fusion Charts.

API Google Chart представляет собой максимально простенький инструмент, с помощью которого вы можете создавать диаграммы из данных, и внедрять их в веб-страницу. Вы интергрируете информацию и форматируете параметры посредством HTTP-запросов, а Google вы ответ выдает вам изображение с диаграммой в формате PNG. Поддерживается много разных форматов диаграмм, и отсылая запрос на тэги изображения, вы без труда сможете вставить диаграмму в веб-страницу.

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

Bluff – это javascript-порт графической библиотеки Gruff для Ruby. Инструмент разработан для поддержки всех свойств что и Gruff, но с минимальными различиями

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

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

JS Charts представляет собой javascript-генератор диаграмм, в процессе чего вам потребуется либо чуточку кода, либо вообще ничего! JS Charts позволит вам с легкостью создавать диаграммы различных шаблонов (столбовые, круговые и т.д.).

Plotkit представляет собой JS-библиотеку для черчения графиков и диаграмм. Есть также поддержка HTML и SVG посредством Adobe SVG Viewer.

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

18.

pChart – это платформа, ориентированная на PHP-классы, и разработанная для создания гладких диаграмм. Информация может быть запрошена из SQL, CSV-файлов, или же введена вручную.

Целью инструмента gRaphael является создание привлекательных диаграмм для вашего сайта. Инструмент основывается на графической библиотеке Raphael. Посмотрите демо для подробного изучения статичных и интерактивных диаграмм в действии.

Visifire – это набор бесплатных инструментов для визуализации данных, разработанный Microsoft Silverlight и WPF. Visifire можно применять и с приложениями WPF и с Silverlight. При помощи одного и того же API, диаграммы в обоих средах (WPF и Silverlight) могут быть изменены буквально за минуту!

- Начинайте чертить!

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

Если мы забыли упомянуть ту или иную отличную библиотеку, пожалуйста, сделайте это за нас в комментариях! Заранее благодарим!