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

随机推荐

Mac显示隐藏文件的终端命令
显示:defaults write com.apple.finder AppleShowAllFiles -bool true隐藏:defaults write com.apple.finder Ap ...
转 Android中shape中的属性大全
<shape>  <solid android:color="#ff9d77"/&g ...
rabbitmq-server启动不了，安装erlang,安装rabbitmq-server
sudo rabbitmq-server start,虽然现实success,但是查看状态,sudo rabbitmq-server status发现居然没有启动,报错是不是端口占用(查看日志/var ...
Windows Server 2008 下ASP程序连接ORACLE数据库驱动错误
今天开发那边升级.改造系统过程中,在测试服务器碰到关于ASP程序连接ORACLE数据库的小问题,虽然是小问题,但是整起来真要命啊,花了不少时间,主要是ASP程序啊,这种上古神器,哥还是当年毕业的时候弄 ...
linux常用查看日志命令
转自:http://yinfeifei.iteye.com/blog/779217 1.cat命令: 功能:1)显示整个文件. 示例: $ cat fileName 2)把文件串连接后传到基本输出,如 ...
cocos2d-x之Box2d初试
物理引擎:用来模拟一套物理事件的物理代码. #ifndef __HELLOWORLD_SCENE_H__ #define __HELLOWORLD_SCENE_H__ #include "c ...
以太网卡TSO技术
一.简介 TSO(TCP Segment Offload)技术是一种利用网卡的少量处理能力,降低CPU发送数据包负载的技术,需要网卡硬件及驱动的支持. 二.原理在不支持TSO的网卡上,TCP层向 ...
paypal IPN 接口返回INVALID参数可能问题
工作于浏览器Chrome时,登录IPN Simulator页发送测试数据,payment_date栏位值中出现乱码,导致无法返回正确的VERIFIED,在此记录.
非常全面的讲解Hosts文件
很奇怪有很多人不知道Hosts是什么东西.在网络病毒日渐盛行的今天,认识Hosts其实是很有用的,因为有好多的网页木马都盯上了这个文件,而在很多时候,您只需打开这个文件做一个小小的修改,就完全可以解决 ...
[转]Google Cloud Messaging: Overview
本文转自:https://developers.google.com/cloud-messaging/gcm

CSS3 chart

CSS3 chart的更多相关文章

随机推荐

热门专题