CSS3 chart

利用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

CSS3 chart的更多相关文章

Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序
XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS. ...
让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案
第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...
CSS3：线上编辑工具及实用资料整理
an I Use 个人最常用的,资料比较全,桌面和移动浏览器支持HTML5,CSS3,SVG和兼容性表. 官网地址:http://caniuse.com/ CSS3 Click Chart CSS3 ...
分享8款最新HTML5/CSS3功能插件及源码下载
1.HTML5/CSS3鬼脸表情下拉菜单超级可爱这款HTML5/CSS3鬼脸表情下拉菜单真的很特别,虽然菜单的实现并没有利用复杂的HTML5/CSS3技术,但是创意的确不错. 在线演示源码下载 ...
8款最受欢迎的HTML5/CSS3应用及源码
新的一周开始,小编也将继续为大家分享精彩的HTML5应用,还有CSS3和jQuery方面的东西.今天给大家带来的是8款最受欢迎的HTML5/CSS3应用及代码,一起来看看吧. 1.基于HTML5 Ca ...
css3前端工具
随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...
css3工具
随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...
36个让人惊讶的 CSS3 动画效果演示【转】
本文收集了35个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支 ...
转：35个让人惊讶的 CSS3 动画效果演示
本文收集了35个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支 ...

随机推荐

SqlSever大数据分页
在sql sever中大数据的分页一直是难以处理的一块,利用id自增列分页也存在不足之处.从一个相对全面的分页看,sql sever2005中新增的row_number()函数解决了这个问题.还是从一 ...
[android] 手机卫士界面切换动画
在/res/anim/ 建立文件tran_out.xml 添加<translate>节点设置x轴来源坐标android:fromXDelta=”0” 设置x轴目的坐标android:to ...
做一些Spring AOP做过的事,封装 jdk动态代理成为一个黑盒子
怎么使用eclise 抽取方法,请看利用eclipse 抽取代码片段为方法抽取完成之后,还需要 ① 将Collection.class换成 target.getClass(),targ ...
java ee 面试时的机试题
写一个简单的用户登录 servlet+jsp+原生ajax+json实现方式: http://pan.baidu.com/s/1jGDY5h0
Linux 下编译安装软件，找不到共享库 xx.so 的解决办法
编译memcached时,报错没有libevent,于是下载libevent,configure , make && make install ,然后在重新安装memcache成功之后 ...
初识zookeeper（二）之与Dubbo-admin关联
1.简介:dubbo-admin,即dubbo管理控制台,管理控制台为内部裁剪版本,开源部分主要包含:路由规则,动态配置,服务降级,访问控制,权重调整,负载均衡,等管理功能,主要是用于Dubbo服务的 ...
Mongodb 字段类型转换
db.diningmembers.find({modifedDate:{$type:9}}).forEach(function(x){x.tel = String(x.tel);db.diningme ...
C语言变参问题
C++中有函数重载这种方法,以供我们调用时要可以不确定实参的个数,其实 C 语言也可以,而且更高明! 我们在stdio.h 中可以看到 printf() 函数的原型: int printf(char ...
[译]OpenStack Object Storage Monitoring
注:翻译的不完整,主要是有些地方翻译后反而妨碍理解,有些不知道怎么翻,anyway,需要时拿来用用也是可行的,顺便共享啦.欢迎提意见. 一个OpenStack Object Storage(OSOS) ...
警惕javascript变量的全局污染问题
作用域的概念总是和变量形影不离,它不是javascript语言独有的概念,只是其运用上与其他大型语言略有不同,JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基 ...

CSS3 chart

CSS3 chart的更多相关文章

随机推荐

热门专题