Как сделать круговую диаграмму css

Круговая диаграмма на чистом css

Можно ли сделать подобную круговую диаграмму, только средствами css?

Отслеживать
22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков
задан 15 дек 2018 в 14:21
Denis Novac novak Denis Novac novak
41 1 1 серебряный знак 2 2 бронзовых знака

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

15 дек 2018 в 14:26

@alexanderbarakin для начала думаю надо автора предупредить чтобы переформулировал вопрос, впервые же пишет здесь)

15 дек 2018 в 15:45
А зачем это делать на css, если можно взять к примеру svg?
15 дек 2018 в 16:12

@HamSter какой код вы ожидаете, если автор даже примерно не знает, как это делается? Белый div с border-radius: 50%?

15 дек 2018 в 16:12
@HamSter не нужно доводить до абсурда
15 дек 2018 в 16:15

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

* < box-sizing:border-box; >html, body < padding: 0; margin: 0; >body < background: #2b2b2b; >.box < width: 200px; height: 200px; border-radius: 50%; margin: 50px auto; text-align: center; position: relative; overflow: hidden; background: #fff; >.box-inner < position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; z-index: 5; border-radius: 50%; background:#2b2b2b; >.box span < display: block; position: relative; top:50%; transform:translateY(-50%); font-size: 30px; font-family: sans-serif; font-weight: bold; color:#fff; z-index: 10; >.box:before < content: ''; position: absolute; z-index: 1; top: 0px; left: 0px; right: 0px; bottom: 0px; clip: rect(0 200px 100px 0); -webkit-transform: rotate(0deg); transform: rotate(0deg); background: #50c690; >.box:after

* < box-sizing: border-box; >html, body < padding: 0; margin: 0; >body < background: #2b2b2b; >.circular-chart < display: block; margin: 10px auto; max-width: 200px; max-height: 200px; >.circle-bg < fill: none; stroke: #fff; stroke-width: 2; >.percentage < fill: #fff; font-family: sans-serif; font-weight: bold; font-size: 10px; text-anchor: middle; >.circle < fill: none; stroke-width: 2; /* stroke-linecap: round; */ stroke: #50c690; transform-origin: 50% 50%; transform: rotate(-90deg); >

P.S: задайте в поиске «css circle chart» и найдете еще больше примеров.

Отслеживать
ответ дан 15 дек 2018 в 16:04
22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков

@Arthur, тем что вандалить не нужно! Вы влезли в мой код. Не оцениваю! А по другим правкам — убирать пробелы — это не необходимые правки!

15 дек 2018 в 16:54
@Arthur, и без обид. ;))))
15 дек 2018 в 17:12

На чистом css нет скорее всего, всё-таки нужен будет JS. На чистом css можно максимум крутилку без всего написать.

Отслеживать
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
ответ дан 15 дек 2018 в 14:27
9 1 1 бронзовый знак

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

15 дек 2018 в 15:40
@Arendach не может, рейтинга не хватает
15 дек 2018 в 16:20
Это неправильный ответ.
15 дек 2018 в 18:25

html
css3

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать круговую диаграмму на чистом CSS?

Хочу сделать такую:

Но проблема в том что, не могу сделать синюю полоску вокруг серой.
Серая — это пустая диаграмма (0%)
Синяя — это уже с данными например (27%, 84% или 47%. )

Update: Прошу прощения, видимо я не правильно сформулировал свой вопрос. Я сделал серую диаграмму, но проблема в том что, теперь хочу классом нанести на нее синюю. Вот в чем проблема. Никак не выходит.
Допустим есть:

37%

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

Вопрос задан более трёх лет назад
19858 просмотров

Комментировать

Решения вопроса 2

Symphony

Azim Kurt @Symphony Куратор тега CSS

Если делать как Вы хотите, т.е. выставлять произвольный процент в такую конструкцию

37%

Как вариант можно сделать с помощью svg

Ответ написан более трёх лет назад

Нравится 5 6 комментариев

Круговая диаграмма с помощью HTML и CSS (Pie Chart with HTML and CSS)

Вы можете создать круговую диаграмму в HTML, используя простую функцию CSS под названием conic-gradient .

Во-первых, мы добавляем элемент на нашу HTML-страницу, который выступает в качестве контейнера для нашей круговой диаграммы.

Нам нужно указать ширину и высоту для элемента, который определяет размер нашей круговой диаграммы:

#my-pie-chart

Затем нам нужно сделать нашу круговую диаграмму круглой, установив border-radius значение 50% :

#my-pie-chart

И, наконец, мы готовы заполнить круговую диаграмму нашими данными.

В качестве примера рассмотрим данные о населении мира по континентам. Мы хотим показать распределение населения по континентам с помощью нашей круговой диаграммы.

Для каждого континента связываем произвольный цвет и процент населения, взятый из Википедии с данными на 1 июля 2022. Данные сведены в следующую таблицу:

Континент	Цвет	Население
Азия	красный	59.22%
Африка	оранжевый	17.89%
Европа	желтый	9.33%
Южная Америка	зеленый	8.28%
Северная Америка	синий	4.73%
Австралия	черный	0.56%
Антарктида	коричневый	0.00%

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

Например, Антарктида представлена коричневым цветом и имеет 0,00% населения мира. Поэтому нам нужен коричневый сектор от 0,00% до 0,00%.
Затем мы хотим построить черный сектор, представляющий Австралию, в которой проживает 0,56% населения мира. Это приводит к увеличению черного сектора с 0,00% до 0,56%.
Точно так же, чтобы представить Северную Америку, нам нужен синий сектор, изменяющийся от 0,56% до 5,29% (= 0,56% + 4,73%).
И так далее.

В конце у нас будет следующее свойство фона CSS:

Круговая диаграмма на чистом CSS

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

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

Читать:

Почему скаченные игры не отображаются на экране телефона самсунг

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

В этой статье я расскажу, как создать круговую диаграмму, используя CSS и всего один HTML-элемент.

Ниже, в CodePen, можно посмотреть, что мы будем создавать:

See the Pen CSS only pie chart by Temani Afif (@t_afif) on CodePen.

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

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

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

Структура HTML для круговой диаграммы

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

Мы также добавляем CSS-переменные в качестве встроенных стилей.

—p : Эта переменная должна содержать процентное значение в виде числа (без знака %). Значение должно быть таким же, как в содержимом .
—b : Эта переменная определяет толщину границы.
—c : Эта переменная определяет основной цвет.

Для целей этой статьи, чтобы код был покороче, я использую однобуквенные переменные. В продакшен-среде, конечно, нужно использовать более осмысленные имена. Например, —percentage , —border-thickness и —main-color .

CSS для круговой диаграммы

Начнем со стилизации содержимого. Здесь все просто, код у нас будет следующий:

(Прим. перев.: «pie» в коде — от англ. «Pie Chart» — «круговая диаграмма»).

Я определяю наш элемент как inline-grid , чтобы легко разместить содержимое в середине при помощи place-content: center . Чтобы наш элемент всегда оставался квадратным, мы используем aspect-ratio: 1 . Также можно использовать height: var(—w) , но всегда полезно изучать и применять новые CSS-свойства.

Возможно, вам любопытно, почему для определения ширины я использую переменную, а не просто прописываю width: 150px . В будущем мне понадобится это значение, поэтому я определяю его при помощи переменной.

Весь остальной CSS-код довольно простой и касается стилизации текста. Можете его изменить по своему вкусу.

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

.pie:before

Псевдоэлемент, имеющий position: absolute , покрывает всю площадь благодаря inset: 0 . Да, еще одно новое CSS-свойство. Это сокращенный вариант для top , right , bottom и left (почитать подробнее можно на MDN Web Docs).

Затем мы превращаем наш псевдоэлемент в круг ( border-radius: 50% ) и применяем conic-gradient() . Обратите внимание на использование CSS-переменных, которые мы определили в качестве встроенных стилей ( —c для цвета и —p для процентного значения).

Пока что мы получаем вот такой результат:

Мы подбираемся к желаемой цели! conic-gradient() дает нам двуцветный градиент. Основной цвет — от 0% до p%, а остальная часть имеет прозрачный цвет (со значением #0000).

Чтобы оставить только границу, мы прячем середину круга при помощи mask . На этот раз мы используем radial-gradient() :

radial-gradient(farthest-side,red calc(99% - var(--b)),blue calc(100% - var(--b)))

В качестве фона это дает нам следующий результат:

Обратите внимание на использование переменной —b , которая определяет толщину границы (на рисунке показано синим цветом).

Теперь представьте, что синяя часть остается, а красная становится невидимой. Это мы и получаем, применяя тот же градиент со свойством mask :

И вот, мы построили нашу круговую диаграмму на одном элементе и нескольких строках CSS-кода.

.pie < --w:150px; width: var(--w); aspect-ratio: 1; position: relative; display: inline-grid; place-content: center; margin: 5px; font-size: 25px; font-weight: bold; font-family: sans-serif; >.pie:before

Как добавить скругление краев

Я добавлю дополнительный градиентный слой для первого (верхнего) конца и псевдоэлемент для второго. Вот иллюстрация этого приема:

Код для скругления верхнего конца:

.pie:before < background: radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--p)*1%),#0000 0); >

Помимо conic-gradient() , сверху мы добавляем radial-gradient() . Размер равен толщине границы (определяется при помощи —b ).

Код для скругления второго конца:

.pie:after < content: ""; position: absolute; border-radius: 50%; inset: calc(50% - var(--b)/2); background: var(--c); transform: rotate(calc(var(--p)*3.6deg)) translate(calc(50% - var(--w)/2)); >

Свойство inset устанавливает размер псевдоэлемента равным —b . Помните, что это сокращенный вариант записи для top , right , bottom и left .

left = right = 50% - b/2

это значит, что с каждой стороны мы сдвигаемся к центру, за минусом отступа в b/2 . Таким образом у нас получается ширина, равная 2*b/2 = b . Та же логика применяется к высоте.

Теперь нам нужно правильно разместить наш элемент. Для этого мы используем свойство transform . Изначально элемент расположен по центру, так что нам нужно его повернуть. Имея процентное значение, мы применяем тройное правило, чтобы получить угол:

angle = percentage*360deg/100

Затем мы выполняем смещение. Здесь нам понадобится ширина, потому что смещение мы делаем на половину ширины ( w/2 ).

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

После этого мы раскрашиваем псевдоэлемент основным цветом — и все готово. Мы получили круговую диаграмму со скругленными концами.

Как анимировать круговую диаграмму

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

@property --p< syntax: ''; inherits: true; initial-value: 0; >

@keyframes p < from >

Обратите внимание: нам нужно указать только значение from . По умолчанию браузер сделает значение to равным определенному нами значению (

60%

И, наконец, мы вызываем анимацию. При желании можете определить продолжительность и задержку.

animation: p 1s .5s both;

К сожалению, эта техника не имеет широкой поддержки. Вы можете протестировать ее в браузерах на основе Chromium (Chrome и Edge), но в Firefox и Safari фокус не сработает. Чтобы подробнее узнать о поддержке, откройте Can I Use.

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