Разработка гибких и поддерживаемых круговых диаграмм с помощью CSS и SVG. Как быстро построить круговую диаграмму на CSS и JavaScript

Обратите внимание, что в этой главе мы будем загружать код напрямую с локального жёсткого диска, а не через веб-сервер. Вам, возможно, потребуется отключить безопасность в 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 . Для каждой точки данных заливаем прямоугольник, координата х которого определяется индексом массива, а высота - его значением.

10 Beers

Вы заметите, что я разделил текст диаграммы на 2 элемента и сгруппировал их (). Это было сделано затем, чтобы мы могли легче наложить заголовок и число друг на друга, а также расположить их, как одну единицу. Я настроил атрибуты X и Y так, чтобы начать с центра фигуры на линии основания и выровнить их по левому краю.

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

@import url(https://fonts.googleapis.com/css?family=Montserrat:400); .chart-text { font: 16px/1.4em "Montserrat", Arial, sans-serif; fill: #000; -moz-transform: translateY(0.25em); -ms-transform: translateY(0.25em); -webkit-transform: translateY(0.25em); transform: translateY(0.25em); } .chart-number { font-size: 0.6em; line-height: 1; text-anchor: middle; -moz-transform: translateY(-0.25em); -ms-transform: translateY(-0.25em); -webkit-transform: translateY(-0.25em); transform: translateY(-0.25em); } .chart-label { font-size: 0.2em; text-transform: uppercase; text-anchor: middle; -moz-transform: translateY(0.7em); -ms-transform: translateY(0.7em); -webkit-transform: translateY(0.7em); transform: translateY(0.7em); }

Для начала, давайте добавим шрифт Montserrat (просто потому, что он мне нравится). Затем нам надо скорректировать font-size ("размер шрифта") и line-height ("высота строки"). После добавления " translateY " в 0.25em текст немного выравнивается по вертикали, но на этом мы еще не закончили.

Нам надо сделать оба текстовых блока меньше и выровнять их до центра, корректируя font-size дотуда, докуда нам нравится (0.6em для более крупного числа и 0.2em для названия выглядят, что надо) и используя свойство " text-anchor " со значением " middle ".

Теперь текст находится в центре. Все, что осталось, это сделать его в верхнем регистре (это легко) и расположить его индивидуальные элементы, используя " translateY ", чтобы они сложились должным образом. И вот что мы имеем сейчас:

Как я уже упомянул ранее, контент SVG является частью DOM, так что он по своей сути более доступный. Это позволяет невероятно легко предоставлять дополнительный контекст для программ, читающих с экрана, через атрибуты и элементы типа заголовков.

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

Помимо этого, мы можем добавить контент-теги и (которые нативны для SVG) и связать их с заголовками ARIA, ID и ролью "предоставления большего количества контекста для программ чтения с экрана".

@import url(https://fonts.googleapis.com/css?family=Montserrat:400); body { font: 16px/1.4em "Montserrat", Arial, sans-serif; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .chart-text { /*font: 16px/1.4em "Montserrat", Arial, sans-serif;*/ fill: #000; -moz-transform: translateY(0.25em); -ms-transform: translateY(0.25em); -webkit-transform: translateY(0.25em); transform: translateY(0.25em); } .chart-number { font-size: 0.6em; line-height: 1; text-anchor: middle; -moz-transform: translateY(-0.25em); -ms-transform: translateY(-0.25em); -webkit-transform: translateY(-0.25em); transform: translateY(-0.25em); } .chart-label { font-size: 0.2em; text-transform: uppercase; text-anchor: middle; -moz-transform: translateY(0.7em); -ms-transform: translateY(0.7em); -webkit-transform: translateY(0.7em); transform: translateY(0.7em); } figure { display: flex; justify-content: space-around; flex-direction: column; margin-left: -15px; margin-right: -15px; } @media (min-width: 768px) { figure { flex-direction: row; } } .figure-content, .figure-key { flex: 1; padding-left: 15px; padding-right: 15px; align-self: center; } .figure-content svg { height: auto; } .figure-key { min-width: calc(8 / 12); } .figure-key { margin-right: 6px; } .figure-key-list { margin: 0; padding: 0; list-style: none; } .figure-key-list li { margin: 0 0 8px; padding: 0; } .shape-circle { display: inline-block; vertical-align: middle; width: 32px; height: 32px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .shape-fuschia { background-color: #ce4b99; } .shape-lemon-lime { background-color: #b1c94e; } .shape-blue { background-color: #377bbc; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; } Beers in My Cellar Belgian Quadrupels Pink chart segment spanning 40% of the whole, which is 4 Belgian Quadrupels out of 10 total. Imperial India Pale Ales Green chart segment spanning 20% of the whole, which is 2 Imperial India Pale Ales out of 10 total. Russian Imperial Stouts Blue chart segment spanning 3% of the whole, which is 3 Russian Imperial Stouts out of 10 total. 10 Beers

Donut chart showing 10 total beers. Two beers are Imperial India Pale Ales, four beers are Belgian Quadrupels, and three are Russian Imperial Stouts. The last remaining beer is unlabeled.

• Belgian Quadrupels (4)
• Imperial India Pale Ales (2)
• Russian Imperial Stouts (3)

Мы также можем добавить ключ легенды для диаграммы в качестве части , отмечая его ролью "представления" и атрибутом aria-hidden , поскольку он и вправду нужен для наглядности.

С щепоткой магии CSS Flexbox мы можем расположить ключ справа и выровнять его по вертикали с диаграммой. Что даст нам финальный продукт:

Поскольку CSS-дизайн с ключом, к которому применяется свойство border-radius и Flexbox могли бы быть отдельными статьями (второе требует гораздо более долгого объяснения), я оставлю эти темы на потом.

Как я упоминал ранее, написание кода для объектов SVG вручную может занимать много времени, особенно если принять во внимание тот факт, что существует множество прекрасных JavaScript библиотек, которые построят эти объекты за вас. Но могут быть случаи (как моя ситуация), где вам или вашей команде нужен метод, который не затрагивает JavaScript, тот, что будет собран на стороне сервера.

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

Мои результаты:

• Применять математику к чему-то вроде этого гораздо более интересно, чем в старшей школе.
• Оглядываясь назад, я понимаю, что логика, стоящая за stroke-dasharray и stroke-dashoffset не такая сложная, как я думал изначально.
• Не забудьте добавить сюда дополнительные уровни доступности. В конце концов, доступность нужна не только в угоду программам чтения с экрана. Она также нужна, чтобы сделать ваш контент более доступным и потребляемым всеми людьми и всеми устройствами (включая поисковые системы). Если ваша JavaScript-библиотека не имеет функций доступности, подумайте над ее изменением.

• Перевод
• Tutorial

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

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

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 – внутренняя заливка цвета фона внутреннего круга.

/** 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 и оставляет место для большего количества контента, который будет располагаться ниже на странице.

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

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

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

Такие индикаторы загрузки вы наверняка встречали, особенно на Flash сайтах. Это сектор круга, который становится все больше и больше, пока не превратится в завершенный круг.

На первый взгляд задача кажется простой: делаем круг, вращаем его и скрываем часть за маской. Но на деле все оказывается несколько сложнее. CSS не подготовлен для решения таких задач, даже при использовании препроцессоров наподобие SASS & Compass. Мы всегда боремся, когда приходится делать различные формы, а особенно при определении стилей и анимации для них. Большая часть рабочего времени уходит на то. чтобы получить что-то работающее, а в жертву приносится семантичность кода и его поддержка.

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

Хотя есть несколько изумительных инструментов для управления круговыми диаграммами (в основном, на JavaScript), мы тем не менее сделаем такой элемент только на CSS и даже анимируем его с помощью нескольких трюков.

Семантичность кода будет так себе! Но сопровождение можно сделать достаточно удобным.

Нам нужно 3 разных элемента:

• spinner: половинка круга, которая будет вращаться;
• mask: данный элемент скрывает вращающийся круг в ходе первых 50% анимации;
• filler: данный элемент заполняет круг в ходе последних 50% анимации.

И все три элемента должны иметь одного родителя для абсолютного позиционирования:

Так как spinner и filler являются двумя половинками одного круга, то мы будем использовать для них класс.pie .

Родительский элемент получает размеры и абсолютное позиционирование контекста для таймера:

Wrapper { width: 250px; height: 250px; position: relative; background: white; }

Важно, чтобы ширина и высота были равны, чтобы получить круг и все работало.

Элементы "spinner " и "filler " используют данный код CSS:

Pie { width: 50%; height: 100%; position: absolute; background: #08C; border: 10px solid rgba(0,0,0,0.4); }

Они имеют ширину равную 50% родительского элемента, так они являются двумя частями одного круга, а их высота равна высоте родительского элемента. Также мы определяем для них одинаковый цвет и рамку.

Spinner { border-radius: 125px 0 0 125px; z-index: 200; border-right: none; animation: rota 10s linear infinite; }

Делаем его полукругом с помощью свойства border-radius на верхнем левом и нижнем левом углах. Также определяем положительное значение для z-index , чтобы разместить его поверх заполняющего элемента, но ниже маски.

Затем добавляем animation длительностью 10 секунд. Об анимации мы поговорим позже.

Filler { border-radius: 0 125px 125px 0; z-index: 100; border-left: none; animation: fill 10s steps(1, end) infinite; left: 50%; opacity: 0; }

Для данного элемента устанавливаем border-radius и z-index , удаляем border-left , и делаем анимацию длительностью 10секунд. Для данного элемента animation-timing-function не получает значения linear , но будет steps(1, end) . Это значит, что animation будет выполняться мгновенно.

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

Mask { width: 50%; height: 100%; position: absolute; z-index: 300; opacity: 1; background: inherit; animation: mask 10s steps(1, end) infinite; }

Маска присутствует с начала анимации, поэтому ее непрозрачность имеет значение 1, а фон наследуется от родительского элемента (чтобы она была невидима). Чтобы закрывать вращающийся элемент, она будет иметь те же размеры, а свойство z-index устанавливается в значение 300.

@keyframes rota { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes fill { 0% { opacity: 0; } 50%, 100% { opacity: 1; } } @keyframes mask { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }

Первая анимация (rota) используется для элемента spinner . Он постепенно вращается от 0 до 360 градусов за 10 секунд.

Вторая анимация (fill) используется для элемента filler . Он немедленно изменяет непрозрачность с 0 до 1 по истечении 5 секунд.

Последняя анимация (mask) используется для элемента mask . Он немедленно изменяет непрозрачность с 1 до 0 по истечении 5 секунд.

Анимация имеет следующий вид:

• T0 - элемент spinner слева, скрыт маской. Элемент filler скрыт.
• T1 - элемент spinner начинает вращаться по часовой стрелке и медленно появляется из-за маски.
• T2 - элемент spinner r повернут на угол 360/10*2 = 72° продолжает вращаться.
• T3 - элемент spinner повернут на угол 360/10*3 = 108° продолжает вращаться.
• T4 - элемент spinner повернут на угол 360/10*4 = 144° продолжает вращаться.
• T5 - элемент spinner повернут на угол 360/10*5 = 180° продолжает вращаться. В данный момент элемент filler мгновенно становится видимым, а маска скрывается.
• T6 - элемент spinner повернут на угол 360/10*6 = 216° продолжает вращаться.
• T7 - элемент spinner повернут на угол 360/10*7 = 252° продолжает вращаться.
• T8 -элемент spinner повернут на угол 360/10*8 = 288° продолжает вращаться.
• T9 - элемент spinner повернут на угол 360/10*9 = 324° продолжает вращаться.
• T10 - элемент spinner повернут на угол 360°. Вернулись к точке старта. Сбрасываем анимацию. Маска появляется, а заполняющий элемент скрывается.

Несколько дополнительных трюков.

Wrapper:hover .filler, .wrapper:hover .spinner, .wrapper:hover .mask { animation-play-state: paused; }

С помощью данного кода вы можете остановить всю анимацию при наведении курсора на родительский элемент.

Благодаря свойству z-index мы можем легко добавить какое-нибудь содержание в элемент spinner и заставить его вращаться. Попробуйте следующий код:

Spinner:after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; top: 10px; right: 10px; background: #fff; border: 1px solid rgba(0,0,0,0.4); box-shadow: inset 0 0 3px rgba(0,0,0,0.2); }

В текущий момент код очень не просто поддерживать. Но если мы используем переменные (в препроцессоре или ожидаемые внутренние переменные CSS), все может стать существенно проще. Например, можно добавить переменные для управления длительностью вместо того, чтобы исправлять код в 3 определениях анимаций.

Если хочется улучшить сопровождаемость кода без использования препроцессоров, можно создать класс с одним управлением длительностью анимаций и добавлять его к 3 дочерним элементам. Например так:

Animation-duration { animation-duration: 10s; }

Данная техника имеет ряд недостатков:

• Не поддерживаются градиенты.
• Не поддерживаются тени.
• Нет адаптивности. Если изменяется размер родительского элемента, то все будет нормально, кроме радиуса закругления рамки. Его придется менять вручную.
• Нет семантичности (4 элемента для одной анимации).

Так как мы используем анимации CSS, то поддержка в браузерах достаточно скудная:

• Internet Explorer 10
• Firefox 12+
• Chrome
• Safari 5+
• Opera 12+
• iOS Safari 3+
• Android 2+

Для front-end разработчика существует огромное количество способов, которыми можно построить круговую диаграмму -  разнообразные библиотеки, плагины, потрясающие возможности SVG графики и т.д. Однако стоит, пожалуй, рассмотреть и самый простой способ создания «пирожкового» чарта, который может быть полезен, когда задача поставлена максимально просто и нет необходимости или возможности использовать дополнительные инструменты. Далее речь пойдёт о примере такой реализации.

Предположим, что имеются исходные данные в виде такого массива, которые нужно представить на круговой диаграмме:

Var dataset = [ { value: 5, color: "#dc3912" }, { value: 40, color: "#ff9900" }, { value: 30, color: "#109618" }, { value: 25, color: "#990099" } ];

value -  это значение в процентах, color -  цвет сектора.

Создадим для начала контейнер, который станет окружностью диаграммы и будет содержать в себе элементы секторов:

Зададим ему также стили:

Container { width: 300px; height: 300px; overflow: hidden; border-radius: 50%; position: relative; }

В результате получаем такой круг. Всё, что выходит за пределы его границ (изображены пунктиром) будет скрыто.

Далее закономерно возникает вопрос -  как мы превратим прямоугольные элементы div в секторы круга и как зададим им нужный угол? Собственно, для первой цели и было установлено свойство overflow:hidden контейнеру, т.к. это позволяет скрыть часть элемента, сделав его таким образом округлым, а для второй нам помогут CSS-трансформации. Далее на примере для одного сектора.

Добавим внутрь контейнера div с классом sector.

CSS:

Sector { width: 50%; height: 50%; position: absolute; left: 50%; top: 0; transform-origin: left bottom; background: #000; }

Таким образом, получился сектор со значением 90 градусов, начинающийся на отметке в 0 градусов.

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

Значение value в первом элементе массива dataset равно 5, переводя в градусы, получаем 18. Для того, чтобы наклон происходил в нужную сторону, ко всем углам будем добавлять 90 градусов.

Таким образом, угол трансформации = 90 + 18 = 108.

transform: skewY(108deg);

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

Transform: rotate(45deg) skewY(108deg);

У этого способа есть один недостаток -  как видно на рисунке, иллюстрирующем значения трансформации skewY, таким образом можно корректно изображать сектора со значением не более 90 градусов. Поэтому для изображения значений, больших, чем 90, придётся рисовать несколько секторов одинакового цвета. Например, если значение угла 100 градусов, отобразим 2 сектора: 90 градусов и 10. Если значение равно 200 градусам, получится 3 сектора -  по 90, 90 и 20 градусов и т.д.

В результате получаем следующий код для динамического добавления секторов:

Var maxValue = 25; var container = $(".container"); var addSector = function(data, startAngle, collapse) { var sectorDeg = 3.6 * data.value; var skewDeg = 90 + sectorDeg; var rotateDeg = startAngle; if (collapse) { skewDeg++; } var sector = $("", { "class": "sector" }).css({ "background": data.color, "transform": "rotate(" + rotateDeg + "deg) skewY(" + skewDeg + "deg)" }); container.append(sector); return startAngle + sectorDeg; }; dataset.reduce(function (prev, curr) { return (function addPart(data, angle) { if (data.value