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

随机推荐

Android开发笔记——常见BUG类型之内存泄露与线程安全
本文内容来源于最近一次内部分享的总结,没来得及详细整理,见谅. 本次分享主要对内存泄露和线程安全这两个问题进行一些说明,内部代码扫描发现的BUG大致分为四类:1)空指针:2)除0:3)内存.资源泄露: ...
spring boot 1.4.1 with jsp file sample
 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=" ...
Centos 源配置 163,epel,mysql
http://mirrors.163.com/.help/centos.html CentOS7-Base-163.repo # CentOS-Base.repo # # The mirror sys ...
SAM4E单片机之旅——23、在AS6（GCC）中使用FPU
浮点单元(Floating Point Unit,FPU),是用于处理浮点数运算的单元. 为使用FPU,除了需要启用FPU外,还需要对编译器进行设置,以使其针对浮点运算生成特殊的指令.虽然在Atmel ...
php多线程pthreads的安装与使用
安装Pthreads 基本上需要重新编译PHP,加上 --enable-maintainer-zts 参数,但是用这个文档很少:bug会很多很有很多意想不到的问题,生成环境上只能呵呵了,所以这个东西玩 ...
php 修改上传文件大小（max_execution_time post_max_size）
有些朋友要通过自己的网站后台,包括论坛,来上传一些文件,php一般为2m,或8m(以下我们按默认为2m),接下来就是来讲怎么修改上传文件大小的. 1.首先修改执行上传文件限制一般的文件上传,除非文件 ...
oracle表相关
堆表数据以堆的形式管理,增加数据时会使用段中找到的第一个能放下数据的自由空间,我们见到的绝大部分的表都是堆表.堆表是数据库的默认表类型. 最简单的情况是 create table test (c1 ...
Windows环境下maven 安装与环境变量配置
Maven是一个项目管理的Java 工具,在JavaEE中,我们可以使用Maven方便地管理团队合作的项目,现在我们在学习JavaEE框架,使用Maven可以管理类库,有效方便地供团队中的其他人员使用 ...
C++杂谈（一）const限定符与const指针
const限定符 c++有了新的const关键字,用来定义常变量,可以替C语言中的#define.关于const限定符,有以下需要注意: 1.创建后值不再改变 2.作用范围在文件内有效 3.添加ext ...
Mac SVN ignore 等相关
OSX自带了SVN命令行,通过终端就可以使用了. 一.SVN ignore Mac的SVN想把node_modules 忽略,即svn status时(svn st缩写)不显示node_nodules ...

CSS3 chart

CSS3 chart的更多相关文章

随机推荐

热门专题