@ereburg
Frontend Developer

Можно ли построить подобную круговую диаграмму с использованием CSS/JS/SVG?

Добрый день!
Недавно возникла необходимость в верстке подобного рода круговой диаграммы (не на фреймворке).

5e0b39ca83149677247168.png

Представлен схематичный рисунок. Диаграмма может быть разбита на 2 и более сектора, соответственно, она должна динамически перестраиваться, если внеслись новые данные. Прошу обратить внимание, что внутри имеются тени, имитация объема, поэтому хотелось бы, чтобы была возможность изменять значения у этих теней и цвета заливки, границ рамок (border/outline), если это возможно.

Пытался своими силами разобраться, как построить подобное чудо на CSS, но, увы, не разобрался, либо нет такой возможности. Более интересное решение - через SVG. Макет сделан в Figma и там такие элементы можно просто тянуть за крайнюю точку (sweep) и сразу же меняется длина сектора, но я так же не разобрался, как динамически изменять пропорции и изгибы дуг через JS. Очевидно, есть какая-то формула, но я не нашел. Если бы макет был статичным, данного вопроса бы не существовало)

Итак, вопрос: можно ли построить такую вот диаграмму? Если да, то как?

Если вы сможете хоть что-то подсказать - буду неимоверно благодарен!
  • Вопрос задан
  • 640 просмотров
Пригласить эксперта
Ответы на вопрос 2
RAX7
@RAX7
За основу можешь взять вот это:

остальное дорисовать будет не сложно
Ответ написан
profesor08
@profesor08 Куратор тега CSS
Ну тут да, только на SVG или Canvas если силенок хватит. Тебе надо определять крайние точки этих зон, и по ним строить кривые. Внутренняя и внешняя кривые должны описывать часть круга. Как строить круг из кривых погугли. Это тебе поможет. Готовых решений под такую диаграму не знаю, есть просто круговые, попробуй что-то из них состряпать, изменив отображение зон.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы