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

Question

[frontend-noob]

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

Answer 1

[Сергей Соколов]

Это рисуется в SVG. Массивные библиотеки вроде D3js или chartjs для этого не нужны.

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

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

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

Сделал демо.

Comments

[frontend-noob]

спасибо, ты гений!!!

[frontend-noob]

А svg вы руками набивали в html'e или использовали какой то графический редактор ? И будет ли работают transition для данного примера(как плавно анимировать движение ползунка)?

[Сергей Соколов]

frontend-noob: svg руками – там же просто круги. Какую-то сложную графику можно из векторного редактора экспортировать/копировать SVG-код – из того же Adobe Illustrator или Inkscape. transition должен работать.

[Сергей Соколов]

frontend-noob: пришлось только атрибут transform для кружочка изменить на css-свойство, чтобы transition заработал.

Answer 2

[DTX]

Это не график, а интерфейс