Круговая диаграмма на чистом CSS
В этой демонстрации разберём, как создать круговую диаграмму с помощью CSS-функции conic-gradient(). Начнём с разметки. Добавим элемент для диаграммы. Список имен элементов данных, которые отображаются на диаграмме.
Перейдём к стилям. Определим с помощью CSS-переменных палитру цветов для диаграммы.
Добавим правило для класса .chart. И определим базовые стили диаграммы: размер и скругление. Временно одним из цветов палитры полностью закрасим фон диаграммы, чтобы сразу увидеть её на странице.
Мы будем раскрашивать диаграмму с помощью конического градиента, который создаётся функцией conic-gradient(). В простейшейм коническом градиенте можно задать список цветов, которые будут плавно перетекать друг в друга.
Мы можем задать угол, где «начинается» конический градиент, если используем первым аргументом функции конструкцию from <угол>. Поэкспериментируйте с углом.
Также можно смещать и центр конического градиента, если использовать конструкцию at <координаты> после указания стартового угла. Тоже можете поэкспериментировать и посмещать центр градиента.
По умолчанию стартовый угол конического градиента равен 0. А цент совпадает с центром контейнера.
Колорстопы конических градиентов задаются в углах или процентах. При этом 100% соответствует 360 градусам.
Если поменять 180deg на 50%, то ничего не поменяется. Используйте проценты для создания конических градиентов, если вам это удобнее.
Резкие цветовые переходы в конических градиентах создаются таким же способом, как и в остальных типах градиентов. С помощью одинаковых значений колорстопов на смежных цветах.
Теперь мы знаем достаточно о конических градиентах, чтобы начать формировать сектора диаграммы. Удалим все цвета и сделаем градиент полностью прозрачным.
Закрасим первый сектор для значения 4%Сыр.
Для этого добавим в градиент ещё один цвет, зададим ему значение var(--color-1) и колорстоп 4%. Проценты в конических градиентах очень удобны для нашей задачи, ведь показатели у нас тоже в процентах.
Оставшуюся часть градиента оставим полностью прозрачной.
Перейдём к следующему значению — 4%Молоко.
Добавим в диаграмму следующий цвет var(--color-2) с колорстопом — 4% 8%. То есть второй цвет начинается на 4% и заканчивается на 8%.
Стартовое значение колорстопа мы взяли от первого цвета, а конечное значение получили, сложив 4% для сыра и 4% для молока.
Значения колорстопов для соседних цветов равны, поэтому мы получили резкий переход между цветами.
Вместо 4% 8% можно задать 0 8%. Так нам не придётся каждый раз пересчитывать начальный угол для следующего сектора, он всегда будет равен 0.
Добавим третий сектор. Значение для третьего показателя Хлеб белый — 9%. Значит, колорстопы будут равны 0 17% (8 + 9 = 17).
Четвёртый сектор Колбаса варёная — 31%. Колорстопы будут равны 0 48% (17 + 31 = 48).
Пятый сектор Хлеб чёрный — 6%. Колорстопы будут равны 0 54% (48 + 6 = 54).
Шестой сектор Колбаса копчёная — 46%. Это последний сектор на диаграмме, укажем для колорстопа одно значение 0 — круг замкнулся.
Перекрасим «легенду». Определим цвет заливки для всех её элементов, используя нашу цветовую палитру.
Первый вариант диаграммы готов. Теперь сделаем второй вариант диграммы — «диаграмму-бублик» с дыркой по центру.
Добавим дополнительный класс chart--donut для диаграммы-бублика.
И добавим дополнительный радиальный градиент поверх разноцветного конического градиента.
Радиальный градиент нужен только для объяснения работы следующего приёма — CSS-маски. С его помощью мы показали форму будущей маски — тоже бублик.
Через маску отображается та часть изображения, которая находится под белой частью маски.
Удалим радиальный градиент из свойства background и добавим его в свойство mask. Текущая маска содержит полупрозрачные цвета, поэтому области изображения под маской либо приглушены, либо полупрозрачны.
Сделаем центральную область маски полностью прозрачной, чтобы полностью «вырезать» центральную часть диаграммы.
Сделаем внешнюю область маски полностью белой, чтобы полностью отобразить внешнюю часть диаграммы. Бублик с маской готов.
Есть разные способы создания масок нужной формы. Первую маску-бублик мы нарисовали с помощью радиального градиента. Второй способ — скомбинировать два линейных градиента с помощью mask-composite: exclude;.
Края изображения после применения второй маски отображаются красивее. Присмотритесь к краям «дырки от бублика» на текущем и на предыдущем шагах.
Круговая диаграмма на конических градиентах завершена.
