Jquery построение графиков по формуле. Круговая диаграмма с jQuery. Создание линейных диаграмм

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

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

Все 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 анимации. Об этом можно почитать по ссылке ниже.

• Перевод

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

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

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

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

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

Версия trunk для флота поддерживает круговые диаграммы.

Возможность масштабирования флота.

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

Sparklines

Ограничения: Pie, Line, Bar, Combination

Sparklines - мой любимый мини-графический инструмент. Действительно отлично подходит для графиков стиля панели инструментов (подумайте о панели инструментов Google Analytics при следующем входе в систему). Поскольку theyre настолько крошечный, они могут быть включены в строку (как в примере выше). Еще одна приятная идея, которая может использоваться во всех графических плагинах, - это возможности самообновления. Их демо-версия Mouse-Speed ​​показывает вам мощь живого графика в лучшем виде.

Диаграмма запросов 0.21

Ограничения: Area, Line, Bar и комбинации этих

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

Добавление значений в диаграмму относительно просто:

ChartAdd({ "label" : "Leads", "type" : "Line", "color" : "#008800", "values" : ["100","124","222","44","123","23","99"] });

jQchart

Ограничения: Бар, Линия

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

TufteGraph

Ограничения: Bar и Stacked Bar

Tuftegraph продает себя как "красивые гистограммы, которые вы покажете своей матери". Он приближается, Флот красивее, но Tufte делает себя очень легким. Хотя с этим и заканчиваются ограничения - есть несколько вариантов выбора, так что вы получаете то, что вы указали. Посмотрите на карту быстрого выигрыша.

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

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