Построение графиков javascript. Круговая диаграмма с jQuery
Часто в веб-приложениях или программном обеспечении нам требуется предоставлять некоторые сведения для пользователей. Раньше такая информация, как например, статистика по трафику или кликам, предоставлялась обычным тестом и цифрами. Этот метод достаточно прост и уже устарел.
С совершенствованием сети Интернет, требуется собирать и высчитывать гораздо больше данных. Так что, отображать результаты обычным текстом вряд ли будет столь эффективным методом. Сегодня на смену тексту пришли графики и диаграммы, посредством которых информация более доступна и понятна пользователям. Буквально, в одно мгновение, взглянув на диаграмму, пользователь может определить, сколько процентов увеличения или уменьшения трафика прибавилось с последней проверки. Это помогает ускорить процесс определения конкретный данных из высчитанной информации.
Существует много различных способов отображения информации, но цель каждого графического компонента (круговая диаграмма, столбчатый график, и так далее) одна – преобразовать буквы и цифры в процентное соотношение и отобразить это визуально.
Ниже мы привели список диаграммных библиотек, которые могут быть вам полезны, если вы решите отобразить ваши текстовые показания в виде графика.
- Библиотеки графиков и диаграмм
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) могут быть изменены буквально за минуту!
- Начинайте чертить!
Хотя и некоторые библиотеки все же требуют минимальных знаний программирования, а некоторые даже могут быть и вовсе сложными и запутанными, все они направлены на предоставление максимально эффективного процесса создания визуализации, диаграмм и графиков. По сути, чем запутаннее библиотека, тем больше возможностей по созданию того или иного проекта.
Если мы забыли упомянуть ту или иную отличную библиотеку, пожалуйста, сделайте это за нас в комментариях! Заранее благодарим!
Бывают случаи, когда на лендинге, да и вообще на сайте необходимо представить определенный вид информации. С помощью данной библиотеки вы сможете создавать графики и диаграммы для сайта - это не так сложно, как кажется. Необходимо один раз разобраться (в помощь Вам примеры в данной статье). Затем лишь ввести свои данные и наслаждаться красивыми и анимированными графиками. Такие вещи всегда привлекают внимание.
Это не единственный способ, позволяющий сделать Ваш лендинг или сайт особенным. Ниже представлены несколько интересных эффектов, которые можно с легкостью применить и для своих проектов:
Все 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 ; } } |
Ну и последний пример с анимацией 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 анимации. Об этом можно почитать по ссылке ниже.
Если ваш сайт интенсивно работает с данными и вам нужно будет легко визуализировать эти данные, как правило, с помощью библиотеки графиков JavaScript. Однако таких библиотек существует несколько десятков, и все они имеют несколько разные возможности.
В этой статье мы рассмотрим AnyChart с помощью 10 стильных, но простых в использовании примеров. AnyChart отлично подходит для Ваших потребностей в визуализации данных и простоты, с которой он может обрабатывать данные практически в любом формате.
Почему AnyChartAnyChart - коммерческая библиотека, она бесплатна для любого некоммерческого использования. Очень хорошо зарекомендовала себя и находится на рынке уже более 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 - использовать таблицу, которая уже существует на странице. Это может быть чрезвычайно эффективным способом визуализации ключевых точек другого скучного списка цифр. Чтобы сделать эту работу, вам нужно будет добавить сценарий адаптера данных вместе с библиотекой диаграмм.
Затем есть два варианта: вы можете извлекать данные из таблиц, созданных с тегом
