Диаграмма с одним значением
<style> .pie { color: limegreen; /* цвет передается в currentColor */ } .pie text { fill: currentColor; text-anchor: middle; dominant-baseline: central; font: bold 7px sans-serif; /* размер текста */ } .pie circle { stroke-width: 5; /* толщина линии */ } .pie circle:nth-child(1) { /* фон */ fill: aliceblue; stroke: aliceblue; } .pie circle:nth-child(2) { fill: none; /* фигура пуста */ stroke: currentColor; stroke-dasharray: 70 100; /* значение сектора */ stroke-linecap: round; /* закреглённые края линии */ transform: rotate(-90deg); /* линия начинается сверху */ transform-origin: center center; } </style> <svg class="pie" width="100" viewBox="0 0 37 37"> <circle r="15.9155" cx="50%" cy="50%"></circle> <circle r="15.9155" cx="50%" cy="50%"></circle> <text x="50%" y="50%">70%</text> </svg> <!-- С = 2πr = 2 * 3,14159 * 15,9155 = 99,99995129 (длина окружности ≈ 100% [medium.com]) 15,9155 + 15,9155 ≈ 32 (диаметр окружности) 32 + 5 (stroke-width) = 37 (значение viewBox) -->
Диаграмма с пятью значениями
<style> .pie circle { fill: none; stroke-width: 31.831; /* 15,9155 + 15,9155 (диаметр окружности) */ clip-path: circle(50%); /* обрезать выходящее за окружность */ cursor: pointer; /* изменить курсор */ transition: all 1.5s; /* плавное изменение */ } .pie circle:nth-of-type(1) { stroke: hsl(0, 100%, 70%); /* цвет сектора */ stroke-dasharray: 25 100; /* первый сектор составляет 25% из 100% */ /* Mozilla Firefox отказался поддерживать функциюcalc
в свойствеstroke-dasharray
*/ } .pie circle:nth-of-type(2) { stroke: hsl(60, 100%, 70%); stroke-dasharray: 0 25 3 100; /* до второго сектора отступ 25%, второй сектор составляет 3% из 100% */ } .pie circle:nth-of-type(3) { stroke: hsl(150, 100%, 70%); stroke-dasharray: 0 28 10 100; /* до третьего сектора отступ 25%+3%=28%, третий сектор составляет 10% из 100% */ } .pie circle:nth-of-type(4) { stroke: hsl(210, 100%, 70%); stroke-dasharray: 0 38 40 100; } .pie circle:nth-of-type(5) { stroke: hsl(270, 100%, 70%); stroke-dasharray: 0 78 100; /* до последнего сектора отступ 25%+3%+10%+40%=78%, последний сектор составляет оставшиеся до 100% */ } .pie g:hover circle:not(:hover) { /* сектора, кроме активного */ opacity: .3; /* сделать полупрозрачным */ } </style> <svg class="pie" width="200" viewBox="0 0 32 32"> <g> <circle r="15.9155" cx="50%" cy="50%"></circle> <circle r="15.9155" cx="50%" cy="50%"></circle> <circle r="15.9155" cx="50%" cy="50%"></circle> <circle r="15.9155" cx="50%" cy="50%"></circle> <circle r="15.9155" cx="50%" cy="50%"></circle> </g> </svg>
Круговая диаграмма с пустой сердцевиной
Наводя мышкой на секторы, по центру появляется значение.
<style> .pie text { text-anchor: middle; dominant-baseline: central; font-size: 5px; visibility: hidden; } .pie circle { fill: none; stroke-width: 8; /* толщина линии */ cursor: pointer; transition: all 1.5s; } .pie circle:nth-of-type(1) { stroke: hsl(0, 100%, 70%); stroke-dasharray: 25 100; } .pie circle:nth-of-type(2) { stroke: hsl(60, 100%, 70%); stroke-dasharray: 0 25 3 100; } .pie circle:nth-of-type(3) { stroke: hsl(150, 100%, 70%); stroke-dasharray: 0 28 10 100; } .pie circle:nth-of-type(4) { stroke: hsl(210, 100%, 70%); stroke-dasharray: 0 38 40 100; } .pie circle:nth-of-type(5) { stroke: hsl(270, 100%, 70%); stroke-dasharray: 0 78 100; } .pie g:hover circle:not(:hover) { opacity: .3; } .pie circle:nth-of-type(1):hover ~ text:nth-of-type(1), .pie circle:nth-of-type(2):hover ~ text:nth-of-type(2), .pie circle:nth-of-type(3):hover ~ text:nth-of-type(3), .pie circle:nth-of-type(4):hover ~ text:nth-of-type(4), .pie circle:nth-of-type(5):hover ~ text:nth-of-type(5) { /* появление текста при наведении указателя мыши на сектор */ visibility: visible; } </style> <svg class="pie" width="200" viewBox="0 0 40 40"> <g> <circle r="15.9155" cx="50%" cy="50%"></circle> <circle r="15.9155" cx="50%" cy="50%"></circle> <circle r="15.9155" cx="50%" cy="50%"></circle> <circle r="15.9155" cx="50%" cy="50%"></circle> <circle r="15.9155" cx="50%" cy="50%"></circle> <text x="50%" y="50%">25%</text> <text x="50%" y="50%">3%</text> <text x="50%" y="50%">10%</text> <text x="50%" y="50%">40%</text> <text x="50%" y="50%">22%</text> </g> </svg>
Круговая диаграмма с легендой
Наводя мышкой на секторы или значения легенды, по центру появляется значение сектора.
Январь
Февраль
Март
Апрель
Май
<style> .pie { --pie-color-1: hsl(0, 100%, 70%); /* цвет сектора */ --pie-color-2: hsl(60, 100%, 70%); --pie-color-3: hsl(150, 100%, 70%); --pie-color-4: hsl(210, 100%, 70%); --pie-color-5: hsl(270, 100%, 70%); display: grid; grid-template-columns: 12em 10em; /* 12em — размер диаграммы, 10em — размер легенды */ gap: 0 3em; /* 3em - 2em (margin-left) = 1em — расстояние от диаграммы до легенды */ overflow: auto; } .pie div { grid-column: 2 / 3; align-self: center; } .pie svg { grid-column: 1 / 2; grid-row: 1 / 6; } .pie div::before { content: ""; width: 1.5em; height: 1.5em; display: inline-block; margin-left: -2em; /* 1.5em (width) + .5em (margin-right) = 2em */ margin-right: .5em; vertical-align: middle; } .pie div:nth-of-type(1):before { background: var(--pie-color-1); } .pie div:nth-of-type(2):before { background: var(--pie-color-2); } .pie div:nth-of-type(3):before { background: var(--pie-color-3); } .pie div:nth-of-type(4):before { background: var(--pie-color-4); } .pie div:nth-of-type(5):before { background: var(--pie-color-5); } .pie text { text-anchor: middle; dominant-baseline: central; font-size: 5px; visibility: hidden; } .pie circle { fill: none; stroke-width: 8; cursor: pointer; transition: all 1.5s; } .pie circle:nth-of-type(1) { stroke: var(--pie-color-1); stroke-dasharray: 25 100; } .pie circle:nth-of-type(2) { stroke: var(--pie-color-2); stroke-dasharray: 0 25 3 100; } .pie circle:nth-of-type(3) { stroke: var(--pie-color-3); stroke-dasharray: 0 28 10 100; } .pie circle:nth-of-type(4) { stroke: var(--pie-color-4); stroke-dasharray: 0 38 40 100; } .pie circle:nth-of-type(5) { stroke: var(--pie-color-5); stroke-dasharray: 0 78 100; } .pie div:nth-of-type(1):hover ~ svg circle:not(:nth-of-type(1)), .pie div:nth-of-type(2):hover ~ svg circle:not(:nth-of-type(2)), .pie div:nth-of-type(3):hover ~ svg circle:not(:nth-of-type(3)), .pie div:nth-of-type(4):hover ~ svg circle:not(:nth-of-type(4)), .pie div:nth-of-type(5):hover ~ svg circle:not(:nth-of-type(5)), .pie g:hover circle:not(:hover) { opacity: .3; } .pie div:nth-of-type(1):hover ~ svg text:nth-of-type(1), .pie div:nth-of-type(2):hover ~ svg text:nth-of-type(2), .pie div:nth-of-type(3):hover ~ svg text:nth-of-type(3), .pie div:nth-of-type(4):hover ~ svg text:nth-of-type(4), .pie div:nth-of-type(5):hover ~ svg text:nth-of-type(5), .pie circle:nth-of-type(1):hover ~ text:nth-of-type(1), .pie circle:nth-of-type(2):hover ~ text:nth-of-type(2), .pie circle:nth-of-type(3):hover ~ text:nth-of-type(3), .pie circle:nth-of-type(4):hover ~ text:nth-of-type(4), .pie circle:nth-of-type(5):hover ~ text:nth-of-type(5) { visibility: visible; } </style> <div class="pie"> <div>Январь</div> <div>Февраль</div> <div>Март</div> <div>Апрель</div> <div>Май</div> <svg viewBox="0 0 40 40"> <g> <circle r="15.9155" cx="50%" cy="50%"></circle> <circle r="15.9155" cx="50%" cy="50%"></circle> <circle r="15.9155" cx="50%" cy="50%"></circle> <circle r="15.9155" cx="50%" cy="50%"></circle> <circle r="15.9155" cx="50%" cy="50%"></circle> <text x="50%" y="50%">25%</text> <text x="50%" y="50%">3%</text> <text x="50%" y="50%">10%</text> <text x="50%" y="50%">40%</text> <text x="50%" y="50%">22%</text> </g> </svg> </div>