我需要下面的 html [并尝试在 html 中用不同颜色实现饼图]
需要如下
有什么帮助吗？我需要在 html 中为每个饼图应用部分颜色，JSFiddle 在这里 http://jsfiddle.net/x4mdC/26/
我的html
<!DOCTYPE html>
<html>
<head>
<title> Pie </title>
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"/>
<meta http-equiv="X-UA-Compatible" content="IE=7;IE=9" />
<link rel="stylesheet" href="opera.css"/>
</head>
<body>
<div class="pieContainer">
<div class="pieBackground"></div>
<div id="pieSlice1" class="hold"><div class="pie"> </div></div>
<div id="pieSlice2" class="hold"><div class="pie"> </div></div>
<div id="pieSlice3" class="hold"><div class="pie"> </div></div>
<div id="pieSlice4" class="hold"><div class="pie"> </div></div>
<div class="piecenteric"></div>
</div><script type="text/javascript" src="jquery.min.js"></script>
</body>
</html>
我的 CSS
.pieContainer {
height: 700px;
margin-left:288px;
margin-top: 86px;
}
.pieContainercircle {
border: 2px solid blue;
padding:10px;
}
.pieBackground {
background-color: grey;
position: absolute;
height:350px;
width:700px;
border-radius: 700px 700px 0 0;
-moz-border-radius: 700px 700px 0 0;
-webkit-border-radius: 700px 700px 0 0;
-o-border-radius: 700px 700px 0 0;
-moz-box-shadow: -1px 1px 3px #000;
-webkit-box-shadow: -1px 1px 3px #000;
-o-box-shadow: -1px 1px 3px #000;
box-shadow: -1px 1px 3px #000;
}
.pie {
position: absolute;
width: 700px;
height: 700px;
-moz-border-radius: 350px;
-webkit-border-radius: 350px;
-o-border-radius: 350px;
border-radius: 350px;
clip: rect(0px, 350px, 700px, 0px);
}
.hold {
position: absolute;
width: 700px;
height: 700px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
clip: rect(0px, 700px, 700px, 350px);
}
#pieSlice1 .pie {
background-color: #B17BF5;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}
#pieSlice2 {
-webkit-transform:rotate(149deg);
-moz-transform:rotate(149deg);
-o-transform:rotate(149deg);
transform:rotate(149deg);
}
#pieSlice2 .pie {
background-color: #F55696;
-webkit-transform:rotate(301deg);
-moz-transform:rotate(301deg);
-o-transform:rotate(301deg);
transform:rotate(301deg);
}
#pieSlice3 {
-webkit-transform:rotate(190deg);
-moz-transform:rotate(190deg);
-o-transform:rotate(190deg);
transform:rotate(190deg);
}
#pieSlice3 .pie {
background-color: #F65E59;
-webkit-transform:rotate(304deg);
-moz-transform:rotate(304deg);
-o-transform:rotate(304deg);
transform:rotate(304deg);
}
#pieSlice4 {
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform:rotate(270deg);
transform:rotate(270deg);
}
#pieSlice4 .pie {
background-color: #2997E6;
-webkit-transform:rotate(323deg);
-moz-transform:rotate(323deg);
-o-transform:rotate(323deg);
transform:rotate(323deg);
}
#pieSlice1 div.pieborder {
border: 5px solid yellow;
}
div.piecenteric {
background-color: white;
border-radius: 300px 300px 0 0;
height: 200px;
margin-left: 172px;
margin-top: 150px;
position: absolute;
width: 355px;
z-index:1;
}
最佳答案
html
<div class="pieContainer">
<div class="pieBackground">
<div class="pieOverlay"></div> <!-- add this overlay div -->
</div>
<div id="pieSlice1" class="hold">
<div class="pie">Introduction</div>
</div>
<div id="pieSlice2" class="hold">
<div class="pie">Customer Engagement</div>
</div>
<div id="pieSlice3" class="hold">
<div class="pie">Customer Insights</div>
</div>
<div id="pieSlice4" class="hold">
<div class="pie">IT Solutions Considerations</div>
</div>
<div class="piecenteric"></div>
</div>
CSS
/* below css for overlay */
.pieOverlay {
background-color: white;
border-radius: 300px 300px 0 0;
height: 200px;
margin-left: 172px;
margin-top: 5px;
position: absolute;
width: 355px;
z-index: 2;
z-index: 111;
border-radius: 50%;
height: 690px;
margin-left: 5px;
position: absolute;
width: 690px;
z-index: 4;
box-shadow: inset 0px 1px 4px #000;
}
.pieBackground {
background-color: grey;
position: absolute;
height:350px;
width:700px;
border-radius: 700px 700px 0 0;
-moz-border-radius: 700px 700px 0 0;
-webkit-border-radius: 700px 700px 0 0;
-o-border-radius: 700px 700px 0 0;
-moz-box-shadow: -1px 1px 3px #000;
-webkit-box-shadow: -1px 1px 3px #000;
-o-box-shadow: -1px 1px 3px #000;
box-shadow: -1px 1px 3px #000;
overflow:hidden; /* add this as well */
}
关于jquery - html饼图中三 Angular 形的部分颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31109033/