Круглая диаграмма на css

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

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

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

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

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

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

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

Для каждого континента связываем произвольный цвет и процент населения, взятый из Википедии с данными на 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-код довольно простой и касается стилизации текста. Можете его изменить по своему вкусу.

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

Псевдоэлемент, имеющий 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-кода.

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

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

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

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

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

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

это значит, что с каждой стороны мы сдвигаемся к центру, за минусом отступа в 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; >

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

).

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

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

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

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

Источник

Круговая диаграмма SVG

Наводя мышкой на секторы, по центру появляется значение.

  25% 3% 10% 40% 22%  

Круговая диаграмма с легендой

Наводя мышкой на секторы или значения легенды, по центру появляется значение сектора.

 .pie < --pie-color-1: hsl(0, 100%, 70%); /* цвет сектора */ --pie-color-2: hsl(60, 100%, 70%); --pie-color-3: hsl(150, 100%, 70%); --pie-color-4: hsl(210, 100%, 70%); --pie-color-5: hsl(270, 100%, 70%); display: grid; grid-template-columns: 12em 10em; /* 12em — размер диаграммы, 10em — размер легенды */ gap: 0 3em; /* 3em - 2em (margin-left) = 1em — расстояние от диаграммы до легенды */ overflow: auto; > .pie div < grid-column: 2 / 3; align-self: center; >.pie svg < grid-column: 1 / 2; grid-row: 1 / 6; >.pie div::before < content: ""; width: 1.5em; height: 1.5em; display: inline-block; margin-left: -2em; /* 1.5em (width) + .5em (margin-right) = 2em */ margin-right: .5em; vertical-align: middle; > .pie div:nth-of-type(1):before < background: var(--pie-color-1); >.pie div:nth-of-type(2):before < background: var(--pie-color-2); >.pie div:nth-of-type(3):before < background: var(--pie-color-3); >.pie div:nth-of-type(4):before < background: var(--pie-color-4); >.pie div:nth-of-type(5):before < background: var(--pie-color-5); >.pie text < text-anchor: middle; dominant-baseline: central; font-size: 5px; visibility: hidden; >.pie circle < fill: none; stroke-width: 8; cursor: pointer; transition: all 1.5s; >.pie circle:nth-of-type(1) < stroke: var(--pie-color-1); stroke-dasharray: 25 100; > .pie circle:nth-of-type(2) < stroke: var(--pie-color-2); stroke-dasharray: 0 25 3 100; > .pie circle:nth-of-type(3) < stroke: var(--pie-color-3); stroke-dasharray: 0 28 10 100; > .pie circle:nth-of-type(4) < stroke: var(--pie-color-4); stroke-dasharray: 0 38 40 100; > .pie circle:nth-of-type(5) < stroke: var(--pie-color-5); stroke-dasharray: 0 78 100; > .pie div:nth-of-type(1):hover ~ svg circle:not(:nth-of-type(1)), .pie div:nth-of-type(2):hover ~ svg circle:not(:nth-of-type(2)), .pie div:nth-of-type(3):hover ~ svg circle:not(:nth-of-type(3)), .pie div:nth-of-type(4):hover ~ svg circle:not(:nth-of-type(4)), .pie div:nth-of-type(5):hover ~ svg circle:not(:nth-of-type(5)), .pie g:hover circle:not(:hover) < opacity: .3; >.pie div:nth-of-type(1):hover ~ svg text:nth-of-type(1), .pie div:nth-of-type(2):hover ~ svg text:nth-of-type(2), .pie div:nth-of-type(3):hover ~ svg text:nth-of-type(3), .pie div:nth-of-type(4):hover ~ svg text:nth-of-type(4), .pie div:nth-of-type(5):hover ~ svg text:nth-of-type(5), .pie circle:nth-of-type(1):hover ~ text:nth-of-type(1), .pie circle:nth-of-type(2):hover ~ text:nth-of-type(2), .pie circle:nth-of-type(3):hover ~ text:nth-of-type(3), .pie circle:nth-of-type(4):hover ~ text:nth-of-type(4), .pie circle:nth-of-type(5):hover ~ text:nth-of-type(5) 
Январь
 
Февраль
 
Март
 
Апрель
 
Май
 25% 3% 10% 40% 22%   

Источник

Круговая диаграмма на основе conic-gradient

Наводя мышкой на значения легенды, меняется цвет секторов.

 .pie < display: grid; grid-template-columns: 12em 10em; /* 12em — размер диаграммы, 10em — размер легенды */ gap: 0 3em; /* 3em - 2em (margin-left) = 1em — расстояние от диаграммы до легенды */ --pie-c_1: 170; /* неактивный цвет */ --pie-c_2: 60; /* активный цвет */ --pie-c1: var(--pie-c_1); --pie-c2: var(--pie-c_1); --pie-c3: var(--pie-c_1); --pie-c4: var(--pie-c_1); --pie-c5: var(--pie-c_1); overflow: auto; > .pie div:not(:last-of-type) < grid-column: 2 / 3; align-self: center; >.pie div:not(:last-of-type)::before < content: ""; width: 1.5em; height: 1.5em; display: inline-block; margin-left: -2em; /* 1.5em (width) + .5em (margin-right) = 2em */ margin-right: .5em; vertical-align: middle; > .pie div:nth-of-type(1):before < background: hsl(var(--pie-c1), 80%, 80%); >.pie div:nth-of-type(2):before < background: hsl(var(--pie-c2), 70%, 70%); >.pie div:nth-of-type(3):before < background: hsl(var(--pie-c3), 60%, 60%); >.pie div:nth-of-type(4):before < background: hsl(var(--pie-c4), 50%, 50%); >.pie div:nth-of-type(5):before < background: hsl(var(--pie-c5), 40%, 40%); >.pie div:last-of-type < grid-column: 1 / 2; grid-row: 1 / 6; >.pie div:last-of-type < --pie-p_1: var(--pie-p1, 0%); --pie-p_2: calc(var(--pie-p_1) + var(--pie-p2, 0%)); --pie-p_3: calc(var(--pie-p_2) + var(--pie-p3, 0%)); --pie-p_4: calc(var(--pie-p_3) + var(--pie-p4, 0%)); width: 12em; aspect-ratio: 1; border-radius: 50%; background: conic-gradient( hsl(var(--pie-c1), 80%, 80%) var(--pie-p_1), hsl(var(--pie-c2), 70%, 70%) 0 var(--pie-p_2), hsl(var(--pie-c3), 60%, 60%) 0 var(--pie-p_3), hsl(var(--pie-c4), 50%, 50%) 0 var(--pie-p_4), hsl(var(--pie-c5), 40%, 40%) 0 ); >.pie div:nth-of-type(1):hover, .pie div:nth-of-type(1):hover ~ div:last-of-type < --pie-c1: var(--pie-c_2); >.pie div:nth-of-type(2):hover, .pie div:nth-of-type(2):hover ~ div:last-of-type < --pie-c2: var(--pie-c_2); >.pie div:nth-of-type(3):hover, .pie div:nth-of-type(3):hover ~ div:last-of-type < --pie-c3: var(--pie-c_2); >.pie div:nth-of-type(4):hover, .pie div:nth-of-type(4):hover ~ div:last-of-type < --pie-c4: var(--pie-c_2); >.pie div:nth-of-type(5):hover, .pie div:nth-of-type(5):hover ~ div:last-of-type 
Январь
 
Февраль
 
Март
 
Апрель
 
Май
 
25%; --pie-p2:3%; --pie-p3:10%; --pie-p4:40%;">
 

Источник