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 支 ...

随机推荐

C语言中的自定义函数
C语言中可以使用系统函数也可以使用自己的函数,就是自定义函数自定义函数分为四种第一种:无参无返回值的函数的声明 void sayH(); 函数的实现 void sayH(){ printf(&q ...
使用docker搭建lnmp环境
Docker容器LNMP环境搭建安装制作镜像启动并关联实例安装系统环境硬件型号: ThinkPad T520 系统版本: ubuntu 14.04 CPU: i7 RAM: 8G 添加软件 ...
linux下安装mysql手记
安装mysql 下载mysql-standard-4.1.8-pc-linux-i686.tar.gz文件到目录/usr/local/下 # groupadd mysql //添加mysql用户组 ...
fragment 切换
1.Fragment的添加方式 FragmentTransaction ft = getFragmentManager().beginTransaction(); ft.hide ft.show ft ...
记录Hibernate的缓存知识
一.Hibernate缓存的作用 Hibernate是一个持久层框架,Hibernate要经常访问物理数据库.为了降低应用程序对物理数据源访问的频次,从而提高应用程序的运行性能,Hibernate的缓 ...
Google HTML/CSS代码风格指南(中文版)
原文链接:http://wncbl.cn/posts/c8e10815/ 看一下没什么印象,那就写一遍吧. 背景本文档定义了HTML/CSS的编写格式和风格规则.它旨在提高合作和代码质量,并使其支持 ...
http://runjs.cn/
http://runjs.cn/ RunJS - 在线编辑.展示.分享.交流你的 JavaScript 代码
读书摘要：第七章闩Suan锁和自旋锁
摘要: 1.闩锁就像是内存上的锁,随着越来越多的线程参与进来,他们争相访问同一块内存,导致堵塞.2.自旋锁就是闩锁,不同之处是如果访问的内存不可用,它将继续检查轮询一段时间.3.拴锁和自旋锁是我们无法 ...
HTTP 协议中的 Content-Encoding 和 Transfer-Encoding(内容编码和传输编码)
转自:http://network.51cto.com/art/201509/491335.htm Transfer-Encoding,是一个 HTTP 头部字段,字面意思是「传输编码」.实际上,HT ...
数据库update的异常一例
调查一列bug,偶然发现了update的一个特性:update t set a=a+1 where id=4; 这样一条简单的语句,也会发生让人意外的事情: 如果 a 的初始值为null时,无论你up ...

CSS3 chart

CSS3 chart的更多相关文章

随机推荐

热门专题