标签：des style blog http color os
利用CSS3技术生成统计图。
原理：利用元素的百分比算出旋转度数。类似于斗地主时，手拿扑克牌的形状。
程序源码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> 5 <title> CSS3 chart </title> 6 <meta name="author" content="rainna" /> 7 <meta name="keywords" content="rainna‘s css3 lib" /> 8 <meta name="description" content="CSS3 chart" /> 9 <style> 10 *{margin:0;padding:0;} 11 body{background:#eee;font-family:Microsoft yahei;line-height:1.6;} 12 h2{font-weight:normal;} 13 li{list-style:none;} 14 15 .g-box{width:600px;margin:30px auto;} 16 .g-box h2{margin:0 0 20px;} 17 .m-chart{margin:0 0 50px;} 18 .m-chart .info li{display:inline-block;margin:0 30px 10px 0;} 19 .m-chart .info-1{margin:15px 0 0;} 20 .m-chart .info-1 input{width:100px;height:24px;} 21 22 .m-chart .chart{position:relative;width:300px;height:300px;margin:30px auto;border-radius:300px;overflow:hidden;} 23 .m-chart .chart li{position:absolute;left:0;top:0;} 24 .m-chart .chart .item{width:150px;height:300px;margin:0 0 0 150px;} 25 26 /* 定义颜色 */ 27 .m-chart .info li:nth-child(1){color:#0092B9;} 28 .m-chart .info li:nth-child(2){color:#86AD00;} 29 .m-chart .info li:nth-child(3){color:#F2B705;} 30 .m-chart .info li:nth-child(4){color:#D97904;} 31 .m-chart .info li:nth-child(5){color:#BC3603;} 32 .m-chart .info li:nth-child(6){color:#CF0CC8;} 33 .m-chart .info li:nth-child(7){color:#33DF08;} 34 .m-chart .info li:nth-child(8){color:#250CE4;} 35 .m-chart .chart li:nth-child(1) .item{background:#0092B9;} 36 .m-chart .chart li:nth-child(2) .item{background:#86AD00;} 37 .m-chart .chart li:nth-child(3) .item{background:#F2B705;} 38 .m-chart .chart li:nth-child(4) .item{background:#D97904;} 39 .m-chart .chart li:nth-child(5) .item{background:#BC3603;} 40 .m-chart .chart li:nth-child(6) .item{background:#CF0CC8;} 41 .m-chart .chart li:nth-child(7) .item{background:#33DF08;} 42 .m-chart .chart li:nth-child(8) .item{background:#250CE4;} 43 44 /* chart主样式，利用旋转度数来实现，当度数小于或等于180时，li只显示右边的颜色，当度数大于180时，只显示li左边的颜色，右边多出的颜色要裁剪掉 */ 45 .m-chart .chart .item{-webkit-transform-origin:0 50%;} /* 定义旋转的中心，为li的中心，中心即为圆心 */ 46 47 /* 图表旋转度数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) */ 48 .m-chart .chart li:nth-child(1) .item{-webkit-transform:rotate(0deg);} 49 .m-chart .chart li:nth-child(2) .item{-webkit-transform:rotate(54deg);} /* 0+54 */ 50 .m-chart .chart li:nth-child(3) .item{-webkit-transform:rotate(90deg);} /* 54+36 */ 51 .m-chart .chart li:nth-child(4) .item{-webkit-transform:rotate(136.8deg);} /* 90+46.8 */ 52 /* 当度数大于180时，li右半部分的颜色需要剪切 */ 53 .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);} 54 .m-chart .chart li:nth-child(5) .item{-webkit-transform:rotate(190.8deg);} /* 136.8+54 */ 55 .m-chart .chart li:nth-child(6) .item{-webkit-transform:rotate(208.8deg);} /* 190.8+18 */ 56 .m-chart .chart li:nth-child(7) .item{-webkit-transform:rotate(280.8deg);} /* 208.8+72 */ 57 .m-chart .chart li:nth-child(8) .item{-webkit-transform:rotate(331.2deg);} /* 280.8+50.4 */ 58 </style> 59 </head> 60 61 <body> 62 <div class="g-box"> 63 <h2>利用CSS3 制图</h2> 64 <div class="m-chart"> 65 <ul class="info"> 66 <li>AAA:15%</li> 67 <li>BBB:10%</li> 68 <li>CCC:13%</li> 69 <li>DDD:15%</li> 70 <li>EEE:5%</li> 71 <li>FFF:20%</li> 72 <li>GGG:14%</li> 73 <li>HHH:8%</li> 74 </ul> 75 <ul class="chart"> 76 <li> 77 <div class="item"></div> 78 </li> 79 <li> 80 <div class="item"></div> 81 </li> 82 <li> 83 <div class="item"></div> 84 </li> 85 <li> 86 <div class="item"></div> 87 </li> 88 <li> 89 <div class="item"></div> 90 </li> 91 <li> 92 <div class="item"></div> 93 </li> 94 <li> 95 <div class="item"></div> 96 </li> 97 <li> 98 <div class="item"></div> 99 </li> 100 </ul> 101 <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> 102 </div> 103 104 <h2>动态生成图表</h2> 105 <div class="m-chart"> 106 <p>请输入百分比:只需输入数字，百分号不用输入。</p> 107 <ul class="info info-1" id="chartipt"> 108 <li>AAA:<input type="text"/></li> 109 <li>BBB:<input type="text"/></li> 110 <li>CCC:<input type="text"/></li> 111 </ul> 112 <div class="btn"><a href="" id="btn">生成图表</a></div> 113 <ul class="chart" id="chart"></ul> 114 </div> 115 </div> 116 <script> 117 var chart = function(){ 118 //公共函数 119 function T$(id){ 120 return document.getElementById(id); 121 } 122 function T$$(root,tag){ 123 return (document || root).getElementsByTagName(tag); 124 } 125 function currentStyle(elem, style) { 126 return elem.currentStyle || document.defaultView.getComputedStyle(elem, null); 127 } 128 129 //主类构造函数 fid:为输入框容器id, bid:为图表容器id 130 var genChart = function(fid,bid){ 131 var self = this; 132 if(!(self instanceof genChart)){ 133 return new genChart(fid,bid); 134 } 135 self.iptContainer = T$(fid); //输入框容器 136 self.chartContainer = T$(bid); //图表容器 137 self.ipt = T$$(T$(fid),‘input‘); //输入框 138 self.iptCount = self.ipt.length || 0; 139 } 140 141 genChart.prototype = { 142 constructor: genChart, 143 showChart: function(){ 144 var self = this; 145 var val = 0; 146 var node; 147 if(!!self.chartContainer) this.chartContainer.innerHTML = ‘‘; 148 for(var i=0,l=self.iptCount;i<l;i++){ 149 if(val > 360){ 150 alert(‘总百分比大于1‘); 151 break; 152 } 153 node = document.createElement(‘li‘); 154 if(val > 180){ // 当度数大于180时，li右半部分的颜色需要剪切 155 node.style.clip = ‘rect(0,150px,300px,0)‘; 156 } 157 node.innerHTML = ‘<div class="item" style="-webkit-transform:rotate(‘+val+‘deg);"></div>‘; 158 self.chartContainer.appendChild(node); 159 val += 360*parseInt(self.ipt[i].value)/100; 160 //如果当前元素的百分比超过50%，则将容器的背景颜色设置为当前元素的背景色，填补空余的颜色 161 if(self.ipt[i].value > 50) self.chartContainer.style.backgroundColor = currentStyle(self.ipt[i].parentNode).color; 162 } 163 } 164 } 165 166 return{ 167 onShowChart: function(fid,bid){ 168 //调用主类 169 var st = genChart(fid,bid); 170 var btn = T$(‘btn‘); 171 btn.onclick = function(event){ 172 event.preventDefault(); 173 st.showChart(); 174 } 175 } 176 } 177 178 }(); 179 180 chart.onShowChart(‘chartipt‘,‘chart‘); 181 </script> 182 </body> 183 </html>
源码下载：chart.zip
标签：des style blog http color os
原文地址：http://www.cnblogs.com/zourong/p/3858492.html
