Как сделать динамическую круговую диаграмму?

Question

[butize]

Здравствуйте! У меня есть вот такая диаграмма https://jsfiddle.net/fe8jpyub/ Каждый полукруг состоит из полупрозрачной линии и цветной линии, которая ее заполняет. Задача такая: сделать так, чтобы человек мог вводить число(впоследствии через админку, но сейчас это не имеет значения), а цветная линия заполняла серую в зависимости от этого числа и так с каждым полукругом.
Подскажите, пожалуйста, это возможно сделать с имеющейся SVG или нет? может быть это нужно переверстывать и делать не svg.

Comments

[Ankhena]

туториал
Гуглится, кстати, примерно за 20 сек

[butize]

Ankhena, это гуглили уже. под эту задачу это не подходит.

[Ankhena]

butize, что-то я даже не стану спрашивать почему.

[butize]

Ankhena, конечно, для этого же нужно посмотреть вопрос. А это уже сложнее, чем написать дурацкий коммент "какая я молодец, за 20 секунд нашла)" Всем бы быть такими, может тогда и такие сайты как этот не нужны будут))
и все верстальщики будут сразу рождаться seniorами

[butize]

Ankhena, Тогда не отвечайте на вопрос) вот и все) Вот я вижу вопрос - он мне не нравится, я пропускаю его мимо, а не насмехаюсь, не пытаюсь 'поучать' человека и тд.
'вы считаете, что имело смысл напрячься и попытаться угадать, чем вам это не подходит?' - конечно нет, но тогда и отвечать не нужно, если в вопросе нет времени разбираться)
Здесь конечно есть товарищи, которые спрашивают куда им пойти работать и, наверно, они Вас сильно бесят. Но мой вопрос не такой, он вполне адекватный и решение на него удалось в итоге найти самостоятельно хотя и не за 20 секунд.
А меня бесят люди, которые не могут пройти мимо, не вставив свои 5 копеек)
Извините, если своим вопросом доставили Вам неприятные эмоции

[Ankhena]

butize, мне нравился вопрос. И более того, вы отметили решением ровно тот же принцип.

Я к тому, что когда вы пишете "не подходит", хорошо бы объяснить чем он не подходит или почему вам не удалось сделать так, чтобы подошло. А также что еще вы пробовали, чтобы не тратить ваше же время зря. И я бы с удовольствием поразбиралась бы в вашей проблеме, также как делаю это в других вопросах.

Answer 1

[butize]

https://gionkunz.github.io/chartist-js/examples.html