@frontend-noob

Как построить похожий график?

Собственно как реализовать такой круглый график (таймер) с точечкой после которой идет полоса, в зависимости от времени на JS ?
Можно ли это сделать на chart.js ?

d76e2b9c6c1a4872a203cf759a1d774f.png
  • Вопрос задан
  • 509 просмотров
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Это рисуется в SVG. Массивные библиотеки вроде D3js или chartjs для этого не нужны.

Заполнение линии – через изменение длины и смещения штриха. Поверх серой окружности рисуется ещё одна, цветной линией. Линия рисуется заданным через stroke-dasharrayпунктиром. Очень-очень длинным пунктиром, таким, что один штрих захватывает всю окружность. Второй параметр, stroke-dashoffset, сдвигает этот штрих "из кадра", оставляя видимой нужную его часть – соотв. отображаемому прогрессу.

Такая техника позволяет анимировать «рисование линии». Не только окружность – линию любой формы можно так рисовать с нуля до полного появления. Надо лишь подобрать длину штриха и «сместить» его из кадра.

«Точечка» просто круг с белым заполнением, рисуется поверх.

Сделал демо.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
DirecTwiX
@DirecTwiX
"display: flex;" уже предлагали?
Это не график, а интерфейс
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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