利用CSS3技术生成统计图。
原理：利用元素的百分比算出旋转度数。类似于斗地主时，手拿扑克牌的形状。
程序源码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title> CSS3 chart </title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's css3 lib" />
<meta name="description" content="CSS3 chart" />
<style>
*{margin:0;padding:0;}
body{background:#eee;font-family:Microsoft yahei;line-height:1.6;}
h2{font-weight:normal;}
li{list-style:none;} .g-box{width:600px;margin:30px auto;}
.g-box h2{margin:0 0 20px;}
.m-chart{margin:0 0 50px;}
.m-chart .info li{display:inline-block;margin:0 30px 10px 0;}
.m-chart .info-1{margin:15px 0 0;}
.m-chart .info-1 input{width:100px;height:24px;} .m-chart .chart{position:relative;width:300px;height:300px;margin:30px auto;border-radius:300px;overflow:hidden;}
.m-chart .chart li{position:absolute;left:0;top:0;}
.m-chart .chart .item{width:150px;height:300px;margin:0 0 0 150px;} /* 定义颜色 */
.m-chart .info li:nth-child(1){color:#0092B9;}
.m-chart .info li:nth-child(2){color:#86AD00;}
.m-chart .info li:nth-child(3){color:#F2B705;}
.m-chart .info li:nth-child(4){color:#D97904;}
.m-chart .info li:nth-child(5){color:#BC3603;}
.m-chart .info li:nth-child(6){color:#CF0CC8;}
.m-chart .info li:nth-child(7){color:#33DF08;}
.m-chart .info li:nth-child(8){color:#250CE4;}
.m-chart .chart li:nth-child(1) .item{background:#0092B9;}
.m-chart .chart li:nth-child(2) .item{background:#86AD00;}
.m-chart .chart li:nth-child(3) .item{background:#F2B705;}
.m-chart .chart li:nth-child(4) .item{background:#D97904;}
.m-chart .chart li:nth-child(5) .item{background:#BC3603;}
.m-chart .chart li:nth-child(6) .item{background:#CF0CC8;}
.m-chart .chart li:nth-child(7) .item{background:#33DF08;}
.m-chart .chart li:nth-child(8) .item{background:#250CE4;} /* chart主样式，利用旋转度数来实现，当度数小于或等于180时，li只显示右边的颜色，当度数大于180时，只显示li左边的颜色，右边多出的颜色要裁剪掉 */
.m-chart .chart .item{-webkit-transform-origin:0 50%;} /* 定义旋转的中心，为li的中心，中心即为圆心 */ /* 图表旋转度数15%(360*15%=54deg) 10%(360*10%=36deg) 13%(360*13%=46.8deg) 15%(360*15%=54deg) 5%(360*5%=18deg) 20%(360*20%=72deg) 14%(360*14%=50.4deg) 8%(360*8%=28.8deg) */
.m-chart .chart li:nth-child(1) .item{-webkit-transform:rotate(0deg);}
.m-chart .chart li:nth-child(2) .item{-webkit-transform:rotate(54deg);} /* 0+54 */
.m-chart .chart li:nth-child(3) .item{-webkit-transform:rotate(90deg);} /* 54+36 */
.m-chart .chart li:nth-child(4) .item{-webkit-transform:rotate(136.8deg);} /* 90+46.8 */
/* 当度数大于180时，li右半部分的颜色需要剪切 */
.m-chart .chart li:nth-child(5),.m-chart .chart li:nth-child(6),.m-chart .chart li:nth-child(7),.m-chart .chart li:nth-child(8){clip:rect(0,150px,300px,0);}
.m-chart .chart li:nth-child(5) .item{-webkit-transform:rotate(190.8deg);} /* 136.8+54 */
.m-chart .chart li:nth-child(6) .item{-webkit-transform:rotate(208.8deg);} /* 190.8+18 */
.m-chart .chart li:nth-child(7) .item{-webkit-transform:rotate(280.8deg);} /* 208.8+72 */
.m-chart .chart li:nth-child(8) .item{-webkit-transform:rotate(331.2deg);} /* 280.8+50.4 */
</style>
</head> <body>
<div class="g-box">
<h2>利用CSS3 制图</h2>
<div class="m-chart">
<ul class="info">
<li>AAA:15%</li>
<li>BBB:10%</li>
<li>CCC:13%</li>
<li>DDD:15%</li>
<li>EEE:5%</li>
<li>FFF:20%</li>
<li>GGG:14%</li>
<li>HHH:8%</li>
</ul>
<ul class="chart">
<li>
<div class="item"></div>
</li>
<li>
<div class="item"></div>
</li>
<li>
<div class="item"></div>
</li>
<li>
<div class="item"></div>
</li>
<li>
<div class="item"></div>
</li>
<li>
<div class="item"></div>
</li>
<li>
<div class="item"></div>
</li>
<li>
<div class="item"></div>
</li>
</ul>
<p>颜色旋转度数如下：BBB:15%(360*15%=54deg) CCC:10%(360*10%=36deg) DDD:13%(360*13%=46.8deg) EEE:15%(360*15%=54deg) FFF:5%(360*5%=18deg) 20%(360*20%=72deg) GGG:14%(360*14%=50.4deg) HHH:8%(360*8%=28.8deg)</p>
</div> <h2>动态生成图表</h2>
<div class="m-chart">
<p>请输入百分比:只需输入数字，百分号不用输入。</p>
<ul class="info info-1" id="chartipt">
<li>AAA:<input type="text"/></li>
<li>BBB:<input type="text"/></li>
<li>CCC:<input type="text"/></li>
</ul>
<div class="btn"><a href="" id="btn">生成图表</a></div>
<ul class="chart" id="chart"></ul>
</div>
</div>
<script>
var chart = function(){
//公共函数
function T$(id){
return document.getElementById(id);
}
function T$$(root,tag){
return (document || root).getElementsByTagName(tag);
}
function currentStyle(elem, style) {
return elem.currentStyle || document.defaultView.getComputedStyle(elem, null);
} //主类构造函数 fid:为输入框容器id, bid:为图表容器id
var genChart = function(fid,bid){
var self = this;
if(!(self instanceof genChart)){
return new genChart(fid,bid);
}
self.iptContainer = T$(fid); //输入框容器
self.chartContainer = T$(bid); //图表容器
self.ipt = T$$(T$(fid),'input'); //输入框
self.iptCount = self.ipt.length || 0;
} genChart.prototype = {
constructor: genChart,
showChart: function(){
var self = this;
var val = 0;
var node;
if(!!self.chartContainer) this.chartContainer.innerHTML = '';
for(var i=0,l=self.iptCount;i<l;i++){
if(val > 360){
alert('总百分比大于1');
break;
}
node = document.createElement('li');
if(val > 180){ // 当度数大于180时，li右半部分的颜色需要剪切
node.style.clip = 'rect(0,150px,300px,0)';
}
node.innerHTML = '<div class="item" style="-webkit-transform:rotate('+val+'deg);"></div>';
self.chartContainer.appendChild(node);
val += 360*parseInt(self.ipt[i].value)/100;
//如果当前元素的百分比超过50%，则将容器的背景颜色设置为当前元素的背景色，填补空余的颜色
if(self.ipt[i].value > 50) self.chartContainer.style.backgroundColor = currentStyle(self.ipt[i].parentNode).color;
}
}
} return{
onShowChart: function(fid,bid){
//调用主类
var st = genChart(fid,bid);
var btn = T$('btn');
btn.onclick = function(event){
event.preventDefault();
st.showChart();
}
}
} }(); chart.onShowChart('chartipt','chart');
</script>
</body>
</html>
源码下载：chart.zip