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

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

Я предлагаю вам решение на основе SVG и простой математической формулы для расчета длины окружности )))

Рисуем круг нашей диаграммы. Я тут уже привел готовый пример, который рисует диаграмму с 88% заполнением. У нас есть радиус, координаты центра круга и два чудесных свойства: «stroke-dasharray» и «stroke-dashoffset». Что это за звери — можете прочитать тут и тут соответственно. От себя могу сказать, что их сумма равна длине окружности (с учетом погрешности). Величина «stroke-dashoffset» как раз и есть та величина, на которую надо «недорисовать» нашу диаграмму.

Как просчитать, сколько нам «недорисовать»? Учитываем погрешность вычисления, связанную с числом «пи».

И добавим некоторые стили для визуализации. От себя скажу, что я перевернул диаграмму для сходства с дизайном, потому что старт диаграммы SVG рисует «на 3 часа»

Могут возникнуть вопросы, почему радиус 54 пикселя, а координаты центра 60 пикселей? Ответ в толщине заливки. Она равна 12 пикселям. Делим ее пополам и добавляем к радиусу — так и получаем координаты центра. А ширина и высота — то уж сами догадаетесь ;)

Результат на codepen. Пользуйтесь! Всем удачи!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *