Влад Мержевич
На сайтах иной раз приходится использовать разные диаграммы, что позволяют наглядно и доступно донести данные до пользователя. Раньше подобные графики делали в Excel, а затем вставляли на сайт картинкой. Но мы ведь живём в век информационных технологий, поэтому хочется вставить диаграмму быстро, просто, да ещё чтобы она была при этом интерактивной и красивой. И вот пришёл Гугл и дал нам такой сервис.
Набор возможных графиков доступен на этой странице. Для каждого графика есть множество параметров, которые позволяют настроить всё по своему вкусу: цвета, положение, заголовки, анимацию и многое другое. Можно обойтись и минимальным набором, если нет желания вдаваться в эти тонкости или когда полностью устраивает стандартный вид графика.
Рассмотрю только два типа графиков - круговую и линейную диаграмму. Остальные типы подключаются по аналогии и разобравшись как добавлять один график, уже легче работать и с другими.
Круговая диаграммаТакая диаграмма напоминает торт, разрезанный на разного размера куски. Общая сумма всех частей составляет 100%, части делят круг пропорционально своим значениям.
В примере 1 показан код для отображения состава воздуха в виде круговой диаграммы.
Пример 1. Круговая диаграмма
Круговая диаграмма google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Газ", "Объём"], ["Азот", 78.09], ["Кислород", 20.95], ["Аргон", 0.93], ["Углекислый газ", 0.03] ]); var options = { title: "Состав воздуха", is3D: true, pieResidueSliceLabel: "Остальное" }; var chart = new google.visualization.PieChart(document.getElementById("air")); chart.draw(data, options); }
Результат примера показан на рис. 1.
Рис. 1. Вид круговой диаграммы
В том месте документа, куда мы добавляем диаграмму, вставляем следующий код.
Ширину и высоту диаграммы задаём через стили и добавляем идентификатор для работы скрипта. Этот же идентификатор должен быть указан в document.getElementById .
Параметры диаграммы состоят из двух блоков: собственно данные для отображения (переменная data ) и настройки (переменная options ). Первая строка в data задаёт названия последующих колонок и хотя она никак не выводится, без неё отображение происходит некорректно. В options пишется заголовок диаграммы, также можно указать трёхмерность и другие настройки, все они являются необязательными и если не заданы, то принимаются по умолчанию.
Диаграмма получается интерактивной, её части подсвечиваются если навести на них курсор или на легенду.
Примеры, список параметров и описание круговой диаграммы доступны по этому адресу: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
Гистограмма - это столбчатая диаграмма, которая удобна для сравнения разных значений между собой. В качестве примера возьмём добычу нефти в XIX веке в России и США (рис. 2). На оси абсцисс (горизонтальная ось) нанесены годы, на оси ординат (вертикальная ось) - добыча нефти в тысячах тонн. Высота прямоугольников соответствует указанному значению.
Рис. 2. Гистограмма
Принцип создания этого типа диаграммы аналогичен предыдущему - добавляем тег , связываем его со скриптом, в котором хранятся данные для графика и параметры отображения (пример 2).
Пример 2. Гистограмма
Гистограмма google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Год", "Россия", "США"], ["1860", 1.3, 70], ["1885", 2000, 3120], ["1901", 12170, 9920] ]); var options = { title: "Добыча нефти", hAxis: {title: "Год"}, vAxis: {title: "Тыс. тонн"} }; var chart = new google.visualization.ColumnChart(document.getElementById("oil")); chart.draw(data, options); }
Для начала добавляем тег и указываем ему желаемую ширину и высоту с помощью стилей. Также важен идентификатор через который скрипт будет вставлять выбранный график в элемент . Сам скрипт в сравнении с предыдущим примером сохраняет свою структуру и состоит из двух редактируемых частей - собственно данные для отображения на графике и различные его настройки. Через параметры hAxis и vAxis добавим для наглядности заголовки осей.
РезюмеУдобно, что сервис ориентирован на пользователей разного уровня подготовки. Можно скопировать прилагающиеся примеры и сразу же получить готовый график стандартного вида. Те пользователи, что станут досконально разбираться во множестве параметров, будут вознаграждены графиками сделанными по их вкусу и подобию дизайна сайта.
Сами графики выводятся достаточно оперативно, к тому же вызываемые файлы при первой загрузке кэшируются, поэтому последующее отображение графиков на сайте происходит быстрее. Поддерживаются все браузеры, включая старые версии Internet Explorer.
Документация сервиса на русский язык не переведена и доступна только на английском, что способно отпугнуть некоторых пользователей. На это есть только одна мантра - учите языки.
Графики являются отличным наглядным пособием при предоставлении данных. Без них невозможно создать качественную админ-панель. Их не так легко установить. Однако, существует новая библиотека, которая облегчает эту задачу - 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 .
Весь код 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 важен, так как его использует плагин для определения вашего графика. Если вы проигнорируете его, могут случиться всевозможные виды странных ошибок (поверьте мне, я знаю).
На этом мы завершили создание нашей красивой диаграммы!
Конец!Вы можете использовать этот пример, чтобы улучшить ваши области управления и визуализировать статистические данные в красивом интерфейсе.
- Перевод
Практически невозможно представить себе информационную панель без диаграмм и графиков. Они быстро и эффективно отображают сложные статистические данные. Более того, хорошая диаграмма также улучшает общий дизайн вашего сайта.
В этой статье я покажу вам некоторые из лучших 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, где всего то придется задать необходимые параметры, вид и поместить его на страницу.
В этой статье, мы расскажем вам о 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 графики. Из функционала стоит выделить простую настройку, быструю работу скрипта и возможность построения графиков косинусного и синусного видов.
Бывают случаи, когда на лендинге, да и вообще на сайте необходимо представить определенный вид информации. С помощью данной библиотеки вы сможете создавать графики и диаграммы для сайта - это не так сложно, как кажется. Необходимо один раз разобраться (в помощь Вам примеры в данной статье). Затем лишь ввести свои данные и наслаждаться красивыми и анимированными графиками. Такие вещи всегда привлекают внимание.
Это не единственный способ, позволяющий сделать Ваш лендинг или сайт особенным. Ниже представлены несколько интересных эффектов, которые можно с легкостью применить и для своих проектов:
Все 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 анимации. Об этом можно почитать по ссылке ниже.