Возможно сделать pie chart на чистом css

270

06 сентября 2017, 12:24

Стоит задача написать pie chart (кругавая диаграма) на чистом CSS. Есть ли возможность реализовать это?

Answer 1

Чтобы не дублировать ответ - https://stackoverflow.com/questions/21205652/how-to-draw-a-circle-sector-in-css - ровно ваша задача (лучший ответ).

Остаётся только надписи добавить, но с этим, думаю, проще.

Answer 2

Если есть желание сделать именно на html-элементах без svg, то надо полукруглый div повернуть в контейнере с overflow hidden - получится сектор. Сам контейнер надо повернуть до желаемого положения. По необходимости можно расставить pointer-events, чтобы можно было наводить на сектора в отдельности.

Код с пояснениями имеется в соседнем вопросе.

Answer 3

тут есть погрешности, нет времени их исправлять, идею ты понял, дальше сам разберешься...

html, 
body { 
  margin: 0; 
  padding: 0; 
  background: #272727 
} 
 
#wrapper { 
  overflow: hidden; 
  position: relative; 
  left: 10px; 
  top: 10px; 
  width: 200px; 
  height: 200px; 
  background-color: transparent; 
 border: 1px solid red; 
  border-radius: 50%; 
} 
 
 
/* 
*/ 
 
.round_graphics { 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 200px; 
  height: 200px; 
  
} 
 
.round_graphics:nth-child(1) { 
  background-color: green; 
  clip-path: polygon(25% 100%, 75% 100%, 50% 50%); 
  transform: rotate(15deg); 
} 
 
.round_graphics:nth-child(2) { 
  background-color: orange; 
  clip-path: polygon(14% 100%, 75% 100%, 50% 50%); 
  transform: rotate(90deg); 
} 
 
.round_graphics:nth-child(3) { 
  background-color: blue; 
  clip-path: polygon(25% 100%, 75% 100%, 50% 50%); 
  transform: rotate(45deg); 
} 
 
.round_graphics:nth-child(4) { 
  background-color: red; 
  clip-path: polygon(25% 100%, 75% 100%, 50% 50%); 
  transform: rotate(245deg); 
} 
 
.round_graphics:nth-child(5) { 
  background-color: white; 
  clip-path: polygon(25% 100%, 75% 100%, 50% 50%); 
  transform: rotate(145deg); 
}

<div id="wrapper"> 
 
  <div class="round_graphics"></div> 
  <div class="round_graphics"></div> 
  <div class="round_graphics"></div> 
  <div class="round_graphics"></div> 
  <div class="round_graphics"></div> 
 
</div>