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

随机推荐

IOS开发之功能模块--自定义UITabBarViewController的备用代码
前言:因为常用,所以我就备份到这里,然后如果需要修改,可以根据需求进行相关的更改. @implementation YMTabBarController - (void)viewDidLoad { [ ...
JMeter源码集成到Eclipse
由于JMeter纯Java开发,界面也是基于Swing或AWT搞出来的,所以想更深层次的去了解这款工具或对于想了解JMeter插件开发或二次开发的童鞋们来说,读读JMeter的源码估计是必不可少的,所 ...
异常处理——毕向东Java基础教程学习笔记
1.异常:就是程序运行过程中出现的不正常情况. 异常的由来:问题本身也是日常生活中一个具体的事物,也可以通过java类的形式进行描述,并封装成对象. 其实 ...
读书摘要：第七章闩Suan锁和自旋锁
摘要: 1.闩锁就像是内存上的锁,随着越来越多的线程参与进来,他们争相访问同一块内存,导致堵塞.2.自旋锁就是闩锁,不同之处是如果访问的内存不可用,它将继续检查轮询一段时间.3.拴锁和自旋锁是我们无法 ...
PHP递归创建多级目录（一道面试题的解题过程）
今天看到一道面试题,要写出一个可以创建多级目录的函数: 我的第一个感觉就是用递归创建,具体思路如下: function Directory($dir){ if(is_dir($dir) || @mkd ...
hibernate集合类型映射
Set无序元素不可重复 List有序元素可重复 Bag无序元素可重复 Map键值对 Student: package model; import java.util.Set; public cl ...
poj 2195 KM算法
题目链接:http://poj.org/problem?id=2195 KM算法模板~ 代码如下: #include "stdio.h" #include "string ...
常用awk命令（转）
awk 用法:awk ' pattern {action} ' 变量名含义 ARGC 命令行变元个数 ARGV 命令行变元数组 FILENAME 当前输入文件名 FNR 当前文件中的记录号 FS 输 ...
xamarin.android之 Android 4.4+ 获取图片真实路径
Android 4.4以下选择图片是可以获取到图片路径的.高于Android 4.4获取图片路径只是获取到一个图片编号. 所以需要针对Android版本进行路径解析: #region 高于 v4.4 ...
linux搭建一个配置简单的nginx反向代理服务器 2个tomcat
1.我们只要实现访问nginx服务器能跳转到不同的服务器即可,我本地测试是这样的, 在nginx服务器里面搭建了2个tomcat,2个tomcat端口分别是8080和8081,当我输入我nginx服务 ...

CSS3 chart

CSS3 chart的更多相关文章

随机推荐

热门专题