Создание круговых диаграмм средствами 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>
Если нажать на эти кнопки - диаграмма будет обновлена.
Рабочий пример можно посмотреть тут