Простой график pie-chart на чистом CSS (SVG)
Иногда бывает нужно создать очень простой круговой график всего из двух элементов. Для этого не обязательно подключать какие-то специальные библиотеки, а можно воспользоваться SVG и CSS.
Пример Круговой диаграммы (pie-chart) на SVG с помощью свойства stroke-dasharray:
Подробнее про свойство stroke-dasharray
на основе которого создается такой чарт-пирог, читайте в этой заметке.
Сколько от круга будет закрашено можно регулировать просто изменив CSS переменную --fill-percent
.
HTML:
<svg style="--fill-percent:30" class="pie-chart" viewBox="0 0 20 20"> <circle r="20" cx="10" cy="10" /> </svg>
CSS:
svg.pie-chart { --fill-percent: 25; /* сколько закрасить */ width: 10em; /* size */ --radius: 20; --circumference: calc( var( --radius ) * 2 * 3.1415 ); /* дилна окружности */ transform: rotate(-90deg); /* попрвим чтобы stroke начиналась сверху */ border-radius: 50%; /* спрячем выступающий stroke */ fill: #ccc; stroke: tomato; stroke-width: calc( var( --radius ) * 2 ); stroke-dasharray: calc( var(--circumference) * var(--fill-percent)/100 ) var(--circumference); transition: stroke-dasharray 700ms ease; }