КодSEOБлогИное

Круговая диаграмма SVG

Диаграмма с одним значением

70% 
<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>

Круговая диаграмма с пустой сердцевиной

Наводя мышкой на секторы, по центру появляется значение.

25% 3% 10% 40% 22% 
<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>

Круговая диаграмма с легендой

Наводя мышкой на секторы или значения легенды, по центру появляется значение сектора.

Январь
Февраль
Март
Апрель
Май
25% 3% 10% 40% 22% 
<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>
◄▲►
Все комментарии