Круговая и кольцевая svg диаграммы на HTML5 с нуля. Практика: создание диаграмм

• Перевод
• Tutorial

Формы это неплохой способ добавить некую изюминку элементам на вашей веб странице. Круги особенно хороши в этом отношении, потому что они целостны, просты и похожи на пирог. А теперь серьёзно, кто не любит пироги?

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

Итак, начнём! При написании этого туториала, я буду работать с Circliful . Это бесплатный jQuery плагин с открытыми исходниками. Вы можете загрузить основной файл с Github . Он включает.js файл вместе с соответствующей CSS таблицей стилей. Страница должна содержать и то и другое, чтобы добиться эффекта круга.

Animated Circle Stats - Template Monster Demo

Моя страница содержит подобную таблицу стилей styles.css для моих личных CSS стилей. Вам также необходимо сделать копию библиотеки jQuery . Она необходима для того, чтобы плагин корректно работал.
Саму по себе, страницу довольно легко структурировать. Элементы круга содержатся в тэгах div, которые используют атрибуты HTML5 для управления данными. В качестве альтернативы, они могут храниться в функции jQuery, но если вы хотите лучше контролировать каждый элемент, тогда проще работать в HTML.

Photoshop Illustrator After Effects

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

• data-dimension – общий размер круга ширина/высота;
• data-text – текст, который появляется в центре каждого круга;
• data-width – толщина вращающейся дуги данных;
• data-fontsize – размер шрифта текста по центру;
• data-percent – число от 0-100 отображающее проценты в вашем круге;
• data-fgcolor – цвет переднего плана круга;
• data-bgcolor – цвет фона круга;
• data-fill – внутренняя заливка цвета фона внутреннего круга.

Компоновка CSS страницы Я не настаиваю на том, чтобы вы напрямую редактировали jquery.circliful.css , конечно если вы не желаете кастомизировать плагин. Большая часть цветов может быть изменена прямо из атрибутов данных HTML5, и если вы действительно хотите переписать какие-либо из стилей Circliful , я бы рекомендовал вам делать это в своей собственной таблице стилей.
Сказав вам это, я создал свою собственную таблицу стилей для данного проекта, а не для того, чтобы переписывать стили Circliful . Сама по себе веб страница нуждается в компоновке по умолчанию, которую действительно легко спроектировать. Контентная область отцентрирована в маленькой секции для круговой диаграммы. Каждая область свободно перемещается в контейнере строки в пределах оригинального #stats div .

/** page structure **/ .wrap { display: block; margin: 0 auto; max-width: 800px; } #intro { display: block; margin-bottom: 25px; text-align: center; } #intro p { font-size: 1.8em; line-height: 1.35em; color: #616161; font-style: italic; margin-bottom: 25px; } #stats { display: block; width: 100%; padding: 15px 0; background: #f8f8f8; border-top: 4px solid #c3c3c3; border-bottom: 4px solid #c3c3c3; } #stats .row { display: block; } .circle-container { display: block; float: left; margin-right: 55px; margin-bottom: 45px; } .circle-container h3 { display: block; text-align: center; font-size: 2.25em; line-height: 1.4em; color: #363636; text-shadow: 1px 1px 0 #fff; }

Внутри каждой секции, контент удерживается в пределах .wrap div для фиксации в центре. Также, свободно передвигающимся элементам круга необходим дополнительный контейнер .clearfix , для того чтобы всё оставалось правильно выровненным.

/** clearfix **/ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html .clearfix { display: block; } * html .clearfix { height: 1%; }

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

Заключительные штрихи Так, мы замесили тесто, заполнили противень для пирога, поместили его в духовку и уже практически готовы снять пробу. Если всё выглядит достаточно хорошо, то каков же будет финальный шаг? Нам нужно немного jQuery кода в качестве украшения этого проекта.
Откройте новый скрипт тэг внизу этой HTML страницы. Он будет содержать небольшой отрывок JavaScript. Так как я использовал все атрибуты данных HTML5, нам не нужно вызывать никаких jQuery опций. Скрипт просто должен запустить функцию Circliful на каждом круге divs. Используя продублированное название класса, как например, .circlestat делает процесс очень простым.

$(function(){ $(".circlestat").circliful(); });

Для тех, кто не знаком с синтаксической структурой jQuery, я предоставлю короткое описание. После того, как документ загрузится, мы запускаем новую функцию. Нашей внутренней целью является каждый элемент, который использует класс .circlestat и запускает функцию circliful() . Это приводит плагин Circliful , который создаёт анимационные эффекты, в действие и применяет дополнительный контент/цвета.

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

• Перевод
• Tutorial

Формы это неплохой способ добавить некую изюминку элементам на вашей веб странице. Круги особенно хороши в этом отношении, потому что они целостны, просты и похожи на пирог. А теперь серьёзно, кто не любит пироги?

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

Итак, начнём! При написании этого туториала, я буду работать с Circliful . Это бесплатный jQuery плагин с открытыми исходниками. Вы можете загрузить основной файл с Github . Он включает.js файл вместе с соответствующей CSS таблицей стилей. Страница должна содержать и то и другое, чтобы добиться эффекта круга.

Animated Circle Stats - Template Monster Demo

Моя страница содержит подобную таблицу стилей styles.css для моих личных CSS стилей. Вам также необходимо сделать копию библиотеки jQuery . Она необходима для того, чтобы плагин корректно работал.
Саму по себе, страницу довольно легко структурировать. Элементы круга содержатся в тэгах div, которые используют атрибуты HTML5 для управления данными. В качестве альтернативы, они могут храниться в функции jQuery, но если вы хотите лучше контролировать каждый элемент, тогда проще работать в HTML.

Photoshop Illustrator After Effects

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

• data-dimension – общий размер круга ширина/высота;
• data-text – текст, который появляется в центре каждого круга;
• data-width – толщина вращающейся дуги данных;
• data-fontsize – размер шрифта текста по центру;
• data-percent – число от 0-100 отображающее проценты в вашем круге;
• data-fgcolor – цвет переднего плана круга;
• data-bgcolor – цвет фона круга;
• data-fill – внутренняя заливка цвета фона внутреннего круга.

Компоновка CSS страницы Я не настаиваю на том, чтобы вы напрямую редактировали jquery.circliful.css , конечно если вы не желаете кастомизировать плагин. Большая часть цветов может быть изменена прямо из атрибутов данных HTML5, и если вы действительно хотите переписать какие-либо из стилей Circliful , я бы рекомендовал вам делать это в своей собственной таблице стилей.
Сказав вам это, я создал свою собственную таблицу стилей для данного проекта, а не для того, чтобы переписывать стили Circliful . Сама по себе веб страница нуждается в компоновке по умолчанию, которую действительно легко спроектировать. Контентная область отцентрирована в маленькой секции для круговой диаграммы. Каждая область свободно перемещается в контейнере строки в пределах оригинального #stats div .

/** page structure **/ .wrap { display: block; margin: 0 auto; max-width: 800px; } #intro { display: block; margin-bottom: 25px; text-align: center; } #intro p { font-size: 1.8em; line-height: 1.35em; color: #616161; font-style: italic; margin-bottom: 25px; } #stats { display: block; width: 100%; padding: 15px 0; background: #f8f8f8; border-top: 4px solid #c3c3c3; border-bottom: 4px solid #c3c3c3; } #stats .row { display: block; } .circle-container { display: block; float: left; margin-right: 55px; margin-bottom: 45px; } .circle-container h3 { display: block; text-align: center; font-size: 2.25em; line-height: 1.4em; color: #363636; text-shadow: 1px 1px 0 #fff; }

Внутри каждой секции, контент удерживается в пределах .wrap div для фиксации в центре. Также, свободно передвигающимся элементам круга необходим дополнительный контейнер .clearfix , для того чтобы всё оставалось правильно выровненным.

/** clearfix **/ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html .clearfix { display: block; } * html .clearfix { height: 1%; }

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

Заключительные штрихи Так, мы замесили тесто, заполнили противень для пирога, поместили его в духовку и уже практически готовы снять пробу. Если всё выглядит достаточно хорошо, то каков же будет финальный шаг? Нам нужно немного jQuery кода в качестве украшения этого проекта.
Откройте новый скрипт тэг внизу этой HTML страницы. Он будет содержать небольшой отрывок JavaScript. Так как я использовал все атрибуты данных HTML5, нам не нужно вызывать никаких jQuery опций. Скрипт просто должен запустить функцию Circliful на каждом круге divs. Используя продублированное название класса, как например, .circlestat делает процесс очень простым.

$(function(){ $(".circlestat").circliful(); });

Для тех, кто не знаком с синтаксической структурой jQuery, я предоставлю короткое описание. После того, как документ загрузится, мы запускаем новую функцию. Нашей внутренней целью является каждый элемент, который использует класс .circlestat и запускает функцию circliful() . Это приводит плагин Circliful , который создаёт анимационные эффекты, в действие и применяет дополнительный контент/цвета.

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

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

На Mac OS X это будет так:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files --disable-web-security

Chromium-browser --disable-web-security

Chrome.exe --disable-web-security

Кроме того, вы можете загрузить страницы через локальный веб-сервер.

В этой главе мы отобразим некоторые данные путём рисования гистограммы. Это покажет вам основы рисования линий, фигур и текста, затем мы сделаем круговую диаграмму с градиентом.

Создание новой страницы

Начните с создания нового текстового файла с именем barchart.html и наберите в нём:

var data = [ 16, 68, 20, 30, 54 ];

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

Переменная data в скрипте хранит набор точек данных, которые мы отобразим в гистограмме.

Теперь получим указатель на холст и зальём фон серым цветом. Добавьте это в скрипт после переменной data .

// получаем указатель на холст var canvas = document.getElementById("canvas"); // получаем указатель на контекст рисования var c = canvas.getContext("2d"); // рисуем c.fillStyle = "gray"; c.fillRect(0,0,500,500);

Добавляем данные

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