Создание круговых диаграмм средствами SVG

Средствами SVG можно "рисовать" любые фигуры, создавать различную инфографику или диаграммы.
В этом уроке рассмотрим библиотеку Circles.

Скачать её можно на github.

Использование

Для использования библиотеки нужно подключить её js скрипт circles.js или circles.min.js

<script src="/js/circles.js"></script>

Далее создайте div, в котором будет отрисовываться круговая диаграмма.

<div class="circle" id="circle-1"></div>

Теперь самое интересное - натравливаем на нужный div библиотеку Circles, указав ей все нужные настройки.
Простейший пример:

    <script>
        var myCircle = Circles.create({
            id:                  'circle-1',
            radius:              50,
            value:               87,
            maxValue:            100,
            width:               12,
        });
    </script>

Таким кодом я указал, что в контейнере с id=circle-1 должна быть создана круговая диаграмма, радиусом 50px, толщиной окружности 12px и заполненная на 87%

Параметров инициализации достаточно много, давайте рассмотрим их подробнее:

id - id элемента на странице, в котором будет отрисована диаграмма
radius - внешний радиус диаграммы
value - какая часть(от maxValue) радиуса будет закрашена
maxValue - максимум частей радиуса (по-умолчанию 100)
width - толщина закрашенного радиуса(кольцо)
colors - массив цветов для закрашенной части кольца и незакрашенной. Например ['#EEE', '#F00'] или ['rgba(255,255,255,0.25)', 'rgba(125,125,125,0.5)']
duration - продолжительность(в миллисекундах) анимации по закрашивании кольца. По-умолчанию 500. Если указать 0 или null - анимация будет отключена.
wrpClass - имя класса, который добавится к div`у, которым будет обёрнуто кольцо.
textClass - имя класса, который добавится к тексту внутри кольца.
valueStrokeClass - имя класса, которое будет добавлено к элементу path диаграммы, отвечающей за закрашенную часть кольца.
maxValueStrokeClass - имя класса, которое будет добавлено к элементу path диаграммы, отвечающей за всё кольцо.
styleWrapper - добавлять или не добавлять inline-стили к элементу (по-умолчанию true)
styleText - добавлять или не добавлять inline-стили к тексту (по-умолчанию true)
text - текст, отображаемый в центре диаграммы (если не передать - будет использовано значение value). Если передать null или пустую строку - текста не будет. Также может быть функцией.

Давайте попробуем всё это использовать.

    <script>
        var myCircle = Circles.create({
            id:                  'circle-2',
            radius:              80,
            value:               44,
            maxValue:            100,
            width:               20,
            colors:              ['#e8ed74', '#c6c24c'],
            duration:            700,
            wrpClass:            'circles-wrp',
            textClass:           'circles-text',
            valueStrokeClass:    'circles-valueStroke',
            maxValueStrokeClass: 'circles-maxValueStroke',
            styleWrapper:        true,
            styleText:           true,
            text:                function(value){return value + '%';}
        });
    </script>

Динамическое изменение

Уже отрисованные диаграммы можно легко изменить, также средствами JavaScript.

Методы API:

updateRadius - изменение внешнего радиуса
updateWidth - изменение толщины кольца
updateColors - изменение цветов кольца
update - изменение value и перерисовка диаграммы, с указанием времени анимации
getPercent - сколько процентов составляет value от maxValue
getValue - вернёт значение value
getMaxValue - вернёт значение maxValue
getValueFromPercent - вернёт числовое значение для value по желаемому проценту от maxValue
htmlifyNumber - вернёт html код контейнера span с указанным в нём числом и классом (не представляю для чего нужен этот метод)
Давайте сделаем кнопки, которыми будем менять наши диаграммы.

<button onclick="myCircle.update(66, 900)">Circle 2 set percent</button>
<button onclick="myCircle.updateRadius(100)">Circle 2 update radius</button>
<button onclick="myCircle.updateColors(['#ed2873',  '#402cc6'])">Circle 2 update colors</button>

Если нажать на эти кнопки - диаграмма будет обновлена.

Рабочий пример можно посмотреть тут