Круговая диаграмма: какое значение CSS требуется для 277-градусного пирога - PullRequest
Новая
       1

Круговая диаграмма: какое значение CSS требуется для 277-градусного пирога

1 голос
/ 09 января 2012

Я пытаюсь создать эту круговую диаграмму (слева) с помощью CSS.Моя попытка справа:

What I want to achieve enter image description here

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

Я прочитал на сайте CSS, что клип сможет принимать другие значения вместо прямоугольника вбудущее (не знаю, сколько лет было веб-странице), поэтому, возможно, вместо использования clip: rect (..); Я могу использовать что-то вроде clip: ellipse (277deg); ?

Также граница не отображается для внутренней части чанка, есть ли способ CSS, которым я могу показать это?

Вот JSFiddle: http://jsfiddle.net/8LecX/1/

Вот простой код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>

.myPie {
    position:absolute;
    width:200px;
    height:200px;
    -moz-border-radius:100px;
    -webkit-border-radius:100px; 
    border-radius:100px; 

    clip:rect(0px,100px,200px,0px);
    /*-moz-transform:rotate(109.44deg); 
    -webkit-transform:rotate(109.44deg); 
    -o-transform:rotate(109.44deg); */

    background-color: RGB(0,153,255);
    border: solid 3px RGB(221,255,100);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

</style>
</head>
<body>

  <div class="myPie">
  </div>

</div>
</body>
</html>

1 Ответ

0 голосов
/ 23 января 2012

Чтобы сделать пироги в css выше 50%, вы должны либо нарисовать нижележащий круг, либо положить кусочки поверх него, либо вы должны удалить клип и добавить второй кусок в качестве наполнителя. Я решил использовать второй вариант.

Вот пример того, как это делается: 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.hold {
position:absolute;
width:200px;
height:200px;
clip:rect(0px,200px,200px,100px);
left:300px;
}
.pie {
position:absolute;
width:200px;
height:200px;
clip:rect(0px,100px,200px,0px);
-moz-border-radius:100px;
-webkit-border-radius:100px; 
border-radius:100px; 
}
.hold.gt50 {
clip:rect(auto, auto, auto, auto);
}
.pie.fill {
-moz-transform:rotate(180deg) !important;
-webkit-transform:rotate(180deg) !important;
-o-transform:rotate(180deg) !important;
transform:rotate(180deg) !important;
}
#data1 {
margin-left:10px;
margin-top:10px;
}
#data1 .pie {
background-color:blue;
border-color:blue;
-moz-transform:rotate(277deg); 
-webkit-transform:rotate(277deg); 
-o-transform:rotate(277deg);
transform:rotate(277deg);
}
</style>
</head>
<body>
  <div id="data1" class="hold gt50">
<div class="pie"></div>
<div class="pie fill"></div></div></body></html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...