Графики и диаграммы. Круговая диаграмма с jQuery Js красивые построитель графиков изменения

Графики являются отличным наглядным пособием при предоставлении данных. Без них невозможно создать качественную админ-панель. Их не так легко установить. Однако, существует новая библиотека, которая облегчает эту задачу - xCharts . Сегодня мы собираемся использовать эту программу вместе с палитрой Date Range для Twitter Bootstrap , чтобы создать красивый AJAX-график для вашего веб-приложения, который извлекает данные из таблицы MySQL.

HTML

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

index.php

Pretty Charts with jQuery and AJAX | Tutorialzine Demo

Здесь используется немало внешних ресурсов. В основной секции у нас есть файлы таблицы каскадных стилей для xCharts , сортировщик чисел, загрузка (интегрированная из супер быстрого CDN CloudFlare) , и наш файл style.css.

Перед тем, как закрыть ярлык таблицы, у нас есть библиотека JQuery , d3.js (требуемые программой xсharts), xcharts , библиотека с удобным интерфейсом sugar.js (которая требует плагин в диапазоне «дат»), плагин в диапазоне «дат» и файл script.js. Далее вы увидите, как все это работает сообща.

MySQL

Как я уже упоминал во введении, скрипт, которым мы пишем, будет получать данные из таблицы MySQL и отображать их в диаграмме. Вы можете найти код SQL , который создаст таблицу в schema.sql в сжатом файле, доступном для загрузки с помощью верхних кнопок. Таблица будет выглядеть следующим образом:

Она имеет только три колонки. Колонке «дата» присваивается уникальный индекс, что означает, что не может быть повторяющихся записей в один и тот же день. В колонку «записей о продажах» указывается количество продаж в течение дня. Ваша база данных будет, безусловно, другой, но, пока вы получите правильный ответ в формат для структурирования данных в простой текстовый формат, используемый для обмена информацией JSON из PHP-скрипта, уже не будет никаких проблем (подробнее об этом в следующем разделе) .

Примечание : Не забудьте ввести свои данные подключения MySQL в setup.php . Затем вы должны будете создать новую базу данных MySQL и импортировать schema.sql из системы PHPMyAdmin или из выбранной вами системы управления.

PHP

В нашем скрипте PHP мы выберем записи из таблицы, которые соответствуют переданной начальной и конечной информации, соберем все данные массив, и выведем их в текстовом формате обмена данными (JSON):

ajax.php

Header("Content-Type: application/json"); // настройка библиотеки require_once("setup.php"); if (isset($_GET["start"]) AND isset($_GET["end"])) { $start = $_GET["start"]; $end = $_GET["end"]; $data = array(); // выбираем результаты $results = ORM::for_table("chart_sales") ->where_gte("date", $start) ->where_lte("date", $end) ->order_by_desc("date") ->find_array(); // создаем новый массив с данными foreach ($results as $key => $value) { $data[$key]["label"] = $value["date"]; $data[$key]["value"] = $value["sales_order"]; } echo json_encode($data); }

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

Полученный ответ от JSON выглядит примерно так:

[{ "label": "2013-01-07", "value": "4" }, { "label": "2013-01-06", "value": "65" }, { "label": "2013-01-05", "value": "96" }]

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

JavaScript

Весь код JS заключается в assets/js/script.js. Код немного длинный, и, чтобы сделать легче его выполнение, я представлю его вам частями.

Сначала мы установим несколько переменных и инициализируем date range picker плагин. Обратите внимание, что диапазон dat, который я использовал, - это ответвление от первоначального плагина. Я решил работать с этой версией, поскольку оригинал зависит от date.js - библиотеки с устаревшей данными, которая конфликтует с xCharts. Вместо нее используется sugar.js - прекрасная полезная библиотека с достоверной и современной информацией.

assets/ js/ script. js

$(function() { // установка стандартных дат, используя функции shugar var startDate = Date.create().addDays(-6), // 6 дней назад endDate = Date.create(); // сегодня var range = $("#range"); // показ дат в порядке ввода range.val(startDate.format("{MM}/{dd}/{yyyy}") + " - " + endDate.format("{MM}/{dd}/{yyyy}")); // загружаем график ajaxLoadChart(startDate,endDate); range.daterangepicker({ startDate: startDate, endDate: endDate, ranges: { "Today": ["today", "today"], "Yesterday": ["yesterday", "yesterday"], "Last 7 Days": , "Last 30 Days": // You can add more entries here } },function(start, end){ ajaxLoadChart(start, end); });

Как вы можете видеть, мы удачно применили информацию и методы sugar.js ", чтобы определить начальную и конечную точку диапазона. Я ввел в сценарий результаты последних 7 дней, и обновил поле ввода диапазона.

Теперь давайте создадим график:

// подсказка когда наводишь на график var tt = $("").appendTo("body"), topOffset = -32; var data = { "xScale" : "time", "yScale" : "linear", "main" : [{ className: ".stats", "data" : }] }; var opts = { paddingLeft: 50, paddingTop: 20, paddingRight: 10, axisPaddingLeft: 25, tickHintX: 9, // How many ticks to show horizontally dataFormatX: function(x) { // здесь конвертируется временной штамп пришедший с // ajax.php в соответствующий JavaScript Date объект return Date.create(x); }, tickFormatX: function(x) { // устанавливаем формат лейблов для оси x return x.format("{MM}/{dd}"); }, "mouseover": function (d, i) { var pos = $(this).offset(); tt.text(d.x.format("{Month} {ord}") + ": " + d.y).css({ top: topOffset + pos.top, left: pos.left }).show(); }, "mouseout": function (x) { tt.hide(); } }; // Создаем новую xChart инстанцию, передавая тип // графика, набор дат и дополнительные функции var chart = new xChart("line-dotted", data, "#chart" , opts);

Сначала я определяю объект конфигурации xСharts с его свойствами и обратными функциями. В собственности dataFormatX я трансформирую yyyy-mm-dd строки, возращенные из запроса AJAX , в надлежащие объекты JavaScript Date, так чтобы плагин мог правильно отобразить их и произвести свои расчеты.

Я также использую обработчик информации для плагина mouseover/mouseout, и применяю его, чтобы показать подсказку (плагин не поставляется с одним из модулей).

Наконец, вот функция JavaScript для загрузки данных через AJAX:

// функция загрузки данных через AJAX и вывод их на график function ajaxLoadChart(startDate,endDate) { // если нету данных, график будет пуст if(!startDate || !endDate){ chart.setData({ "xScale" : "time", "yScale" : "linear", "main" : [{ className: ".stats", data: }] }); return; } // в противном случае, формируем ajax запрос $.getJSON("ajax.php", { start: startDate.format("{yyyy}-{MM}-{dd}"), end: endDate.format("{yyyy}-{MM}-{dd}") }, function(data) { var set = ; $.each(data, function() { set.push({ x: this.label, y: parseInt(this.value, 10) }); }); chart.setData({ "xScale" : "time", "yScale" : "linear", "main" : [{ className: ".stats", data: set }] }); }); } });

xCharts предоставляет метод установки данных (the setData), так что вы можете легко переместить или заменить отображенные данные. Атрибут the className важен, так как его использует плагин для определения вашего графика. Если вы проигнорируете его, могут случиться всевозможные виды странных ошибок (поверьте мне, я знаю).

На этом мы завершили создание нашей красивой диаграммы!

Конец!

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

Здравствуйте, уважаемые читатели 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" } ] ;

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

• Перевод

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

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

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

Краткий обзор javascript библиотек для построения графиков

Highcharts

Highcharts - библиотека для построения графиков, написанная на чистом HTML5/JavaScript, предлагает интуитивно понятные интерактивные диаграммы для вашего веб-сайта или веб-приложения. Highcharts в настоящее время поддерживает line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall и полярные типы диаграмм.

Google Charts

Google Charts -предлагает разнообразные графики, предназначенных для решения визуализации данных. Эти диаграммы основаны на чистом HTML5/SVG технологии (принимающей VML для старых версий IE), так что никаких плагинов не требуется. Все они являются интерактивными, и многие из них pannable и масштабируемой. Добавление этих диаграмм на страницу может быть сделано в несколько простых шагов.

CanvasJS

CanvasJS - простая в использовании HTML5 и JavaScript библиотека Charting , построенная на элементе Canvas . Графики могут отображаться на различных устройствах, включая мобильные устройства, Ipad, Android, Windows Phone, Microsoft Surface, на настольных компьютерах и т.д. Это позволяет создавать функционяльный графики, которые работают на всех устройствах без ущерба для удобства обслуживания или функциональности вашего веб-приложения. CanvasJS поставляется с красивыми темами и загружается в 10 раз быстрее, чем обычные флэш и SVG График - в результате чего графики легкие и красивые.

Chart JS

Chart JS - Легкая, объектно-ориентированная библиотека для построения графики на стороне клиента.

RGraph

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

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

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

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