Диаграмма — это графическое изображение данных, которое позволяет быстро визуализировать сложную информацию. Круговая диаграмма — это один из видов диаграмм, который используется для отображения относительных долей или процентного соотношения между несколькими категориями.
Создание круговой диаграммы с помощью SVG может быть очень простым и эффективным способом для визуализации данных на вашем веб-сайте. В этой статье мы рассмотрим шаги, необходимые для создания круговой диаграммы с помощью SVG.
Шаг 1: Создание HTML-структуры
Первым шагом является создание HTML-структуры для вашей круговой диаграммы. Для этого вы можете использовать тег <svg>, который будет служить контейнером для вашей диаграммы. Внутри этого контейнера вы можете создать несколько элементов <circle>, которые будут представлять фон и результат в виде линии или же целого сегмента. Каждому тегу желательно добавить уникальный class, который будет использоваться для стилизации элемента с помощью CSS.
Пример HTML-структуры:
<svg class="chart" viewbox="0 0 44 44">
<circle class="chart-circle-bg" cx="50%" cy="50%" fill="none" stroke-width="12" r="15.91549431"></circle>
<circle class="chart-circle" fill="none" stroke-dasharray="98 100" cx="50%" cy="50%" r="15.91549431" stroke-width="12"></circle>
</svg>
Шаг 2: Стилизация круговой диаграммы с помощью CSS
Следующим шагом является стилизация вашей круговой диаграммы с помощью CSS. Много стилей тут и не надо, по требуется всего лишь задать высоту и ширину svg элементу, а также перевернуть с помощью свойства transform на 90 градусов против часовой стрелки. Далее задать цвет фоновому элементу и цвет полосы с результатом.
Пример CSS-стилей:
.chart {
width: 400px; // любая ширина, так как svg, все пропорционально изменяется
height: 400px; // любая высота
position: relative;
display: block;
transform: rotate(-90deg);
}
.chart-circle-bg {
stroke: #f4f4f4;
}
.chart-circle {
animation: chartAnimate 2s reverse;
transition: all linear .2s;
stroke: #2ebaae;
}
@keyframes chartAnimate {
to {
stroke-dasharray: 0 100; // 100 - максимальное число
}
}
Вот и все, диаграмма готова, кроме того, вы можете использовать анимации CSS для создания эффекта заполнения сегмента при загрузке страницы или при наведении курсора мыши.