svg круговая диаграмма с процентами внутри - PullRequest
0 голосов
/ 20 мая 2018

Можно ли создать круговую диаграмму, используя SVG, с процентами, отображаемыми внутри кружков.

Я знаю, что мы можем создавать круговые диаграммы, используя SVG, как показано ниже, но не уверен, как расположить или отобразить процентный текст,Пожалуйста, помогите.

svg {
  width: 200px;
  border-radius: 50%;
  background: #3f51b5; 
  transform: rotate(-90deg);
}
 
circle {
  fill: none;
  stroke-width: 32;
  r: 16;
  cx: 16;
  cy: 16;
}
 
circle.first {
  stroke: #00bcd4;
 
}
 le.second {
  stroke: #ffeb3b;
}
  
circle.third {
  stroke: purple;
}
<svg viewBox="0 0 32 32">
  <circle class='first' stroke-dasharray="34 100"></circle>
  <circle class='second' stroke-dasharray="36 100"></circle>
  <circle class='third' stroke-dasharray="3 100"></circle>
</svg>

enter image description here

1 Ответ

0 голосов
/ 21 мая 2018

Вы можете рассмотреть text элемент и скорректировать их положение:

svg {
  width: 200px;
  border-radius: 50%;
  background: #3f51b5; 
  transform: rotate(-90deg);
}
svg text {
  transform: rotate(90deg);
  font-size:5px;
}
 
circle {
  fill: none;
  stroke-width: 32;
  r: 16;
  cx: 16;
  cy: 16;
}
 
circle.first {
  stroke: #00bcd4;
 
}
 le.second {
  stroke: #ffeb3b;
}
  
circle.third {
  stroke: purple;
}
<svg viewBox="0 0 32 32">
  <circle class='first' stroke-dasharray="34 100"></circle>
  <circle class='second' stroke-dasharray="36 100"></circle>
  <circle class='third' stroke-dasharray="3 100"></circle>
  <text x="5" y="-11" fill="#fff">65%</text>
  <text x="15" y="-26" fill="#fff">5%</text>
  <text x="18" y="-17" fill="#fff">35%</text>
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...