首页 > 代码库 > CSS3 chart
CSS3 chart
利用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:为图表容器id130 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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。