Подтолкните на верный путь в создание «Графика» без использования сторонних библиотек?

Ребята, доброго времени суток! Возник вопрос, с какой стороны подходить к созданию подобного, простого псевдографика (на самом деле не знаю, как это можно назвать), используя html, css и js, желательно без canvas.

f70798f0a27f487f8c434b2d80b2b333.png

Один из вариантов, который сразу пришел в голову, это два круга, один внешний, а другой внутренний.
Во внутренним круге находится какой-то элемент, который окрашивается в определенный цвет и имеет определенную форму.
При этом расчёт % исходит из того, что
полный круг - это 2pi - 360 градусов, следовательно
1% - 3,6 градуса. Тупик, как нарисовать фигуру я так и не понял.

Ваши варианты, как бы вы это реализовали?
  • Вопрос задан
  • 2459 просмотров
Пригласить эксперта
Ответы на вопрос 2
Нашел!!! :)

stackoverflow.com/questions/14222138/css-progress-...

о том как https://medium.com/@andsens/radial-progress-indica...

пример jsfiddle.net/andsens/mLA7X

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

Вот, кстати и он, тот что попроще codepen.io/geedmo/pen/InFfd
Ответ написан
Комментировать
@konishua
3 дива - нижний целый круг, над ним две полуокружности другого цвета, вращающиеся вокруг центра нижнего круга (вернее одна неподвижна - закрывает половину нижнего круга, а друга накладывается сверху и поворачивается докрашивая нужную часть второй половины). Цвета всех элементов меняются в зависимости от того какого цвета нужно больше получить на диаграмме.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы