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:为图表容器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

posted @ 2014-07-21 15:23  ZRainna  阅读(1182)  评论(0)  编辑  收藏  举报