Хотите создать этот график, используя css и html - PullRequest
Новая
       59

Хотите создать этот график, используя css и html

3 голосов
/ 14 января 2020

Я пробовал этот код, но столкнулся с проблемой размера. Проблема с изменением размера границы круга, поэтому, пожалуйста, помогите мне решить эту проблему. Выполните код на фрагменте кода и узнайте, какая у меня проблема, и она должна выглядеть как в образе, который я дал. Это код с помощью css в html. Как настроить график. При использовании css в html для изменения размера отдельных частей графиков, но график нельзя настроить. как настроить это. Можно настроить в css? 

body{
  background: darkturquoise;
}

.circle-sector {
  overflow: hidden;
  width: 150px;
  height: 75px;
  transform-origin: 50% 100%;
  position: absolute; 
}

.circle {
  margin-top:18px;
    margin-left:5px;
  width: 90px;
  height: 60px;
  border-radius: 60px 60px 0 0;
  background: #00aaad ;
  transform-origin: 50% 100%;
  transform: rotate(90deg);
    
}

.center {
  width: 80px;
  height: 80px;
  margin-left: 10px;
  background: darkturquoise;
  border-radius: 50%;
  margin-top: 60px;
  transform: rotate(0deg);
  position: absolute;
   
}
.another-circle {
  width: 100px;
  margin-left: 0px;
  height: 50px;
  margin-top: 0px;
  border-radius: 50px 50px 0 0;
  background: white;
  transform-origin: 50% 100%;
  transform: rotate(0deg);
}
.another-circle1 {
 margin-top: 10px;
 margin-left: 30px;
  width:120px;
  height: 80px;
  border-radius: 20px 30px 0 0;
  background: gray ;
  transform-origin: 50% 100%;
  transform: rotate(-100deg);
}  
 .another-circle2 {
  margin-top:0px; 
  margin-left: 0px;
  width: 90px;
  height: 45px;
  border-radius: 45px 50px 0 0;
  background: black ;
  transform-origin: 50% 100%;
  transform: rotate(-145deg);
} 
<div class="circle-sector" style="transform: rotate(0deg);">
  <div class="circle"></div>
</div>

<div class="circle-sector" style="transform: rotate(-90deg);">
  <div class="another-circle"></div>
</div>

<div class="circle-sector" style="transform: rotate(180deg);" >
  <div class="another-circle1"></div>
</div> 
    <div class="circle-sector" style="transform: rotate(250deg);" >
  <div class="another-circle2"></div>
</div>  
<div class="center"></div>

enter image description here

1 Ответ

5 голосов
/ 14 января 2020

Я бы предложил перерисовать круги в <SVG>. Отрегулируйте stroke-width, stroke-dasharray и stroke-dashoffset при необходимости. 

body {
  background-color: darkturquoise;
}
svg {
  width: 200px;
  height: 200px;
}
circle {
  fill: none;
  stroke-linecap: butt;
  transform: rotate(-86deg);
  transform-origin: center;
  
  animation-name: drawCircle;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.circle1 {
  stroke-dasharray: 330;
  stroke-dashoffset: 0;  
  stroke-width: 10px;
  stroke: #fff;
  z-index: 4;
}
.circle2 {
  stroke-dasharray: 330;
  stroke-dashoffset: 250;  
  stroke-width: 30px;
  stroke: #00aaad;
  z-index: 3;
}
.circle3 {
  stroke-dasharray: 330;
  stroke-dashoffset: 200;;  
  stroke-width: 30px;
  stroke: grey;
  z-index: 2;
}
.circle4 {
  stroke-dasharray: 330;
  stroke-dashoffset: 150;  
  stroke-width: 20px;
  stroke: black;
  z-index: 1;
}
<svg>
  <circle class="circle1" r="50" cx="100" cy="100"></circle>
  <circle class="circle4" r="50" cx="100" cy="100"></circle>
  <circle class="circle3" r="50" cx="100" cy="100"></circle>

  <circle class="circle2" r="50" cx="100" cy="100"></circle>


</svg>
...