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语言中Static和Const关键字的的作用
程序的局部变量存在于(堆栈)中,全局变量存在于(静态区 )中,动态申请数据存在于( 堆)中. 1.作用于变量: 用static声明局部变量-------局部变量指在代码块{}内部定义的变量,只在代码块 ...
- IPv4中IP地址分类
分三个部分进行讲述: 1 五类IP 2 特殊用途的IP 3 私有IP 1 五类IP IPV4简单粗暴地把IP地址分为五类.分类方法如下图所示: 也就是说,分为以下几类: A: 0.0.0.0-127. ...
- 多线程--毕向东java基础教程视频学习笔记
目录 1.多线程运行的安全问题 2.多线程同步代码块 3.同步方法的锁是this 4.静态同步方法的锁是Class对象 5.单例设计模式(面试中的考点) 6.死锁(一个发生死锁的例子) 多线程运行的安 ...
- rowcount和@@Rowcount的区别,获取insert、update、delete影响行数
rowcount的用法: rowcount的作用就是用来限定后面的sql在返回指定的行数之后便停止处理,比如下面的示例, set rowcount 10select * from 表A 这样的查询只会 ...
- 【Java设计模式】java单例模式
解释一下什么是单例模式: 单例模式确保某个类只有一个实例,而且自行实例化并向整个系统提供这个实例.在计算机系统中,线程池.缓存.日志对象.对话框.打印机.显卡的驱动程序对象常被设计成单例.这些 ...
- 「ubuntu」通过无线网络安装Ubuntu Server,启动系统后如何连接无线网络
接触Ubuntu系统不久,发现无线网络环境下安装Ubuntu Server一个不太人性化的设计:在安装过程中选择无线网卡,即使用无线网络安装(此时需要选择Wi-Fi网络并输入密码),但系统安装完成重启 ...
- 初识zookeeper(二)之与Dubbo-admin关联
1.简介:dubbo-admin,即dubbo管理控制台,管理控制台为内部裁剪版本,开源部分主要包含:路由规则,动态配置,服务降级,访问控制,权重调整,负载均衡,等管理功能,主要是用于Dubbo服务的 ...
- GPS 坐标距离计算
CREATE FUNCTION [dbo].[Rad]( @d float ) RETURNS float BEGIN return @d * PI()/ 180.00; End CREATE FUN ...
- Mysql在windows下和linux下对表名大小写默认要求的一个细节
今天在虚拟机里搭建项目环境,偷了下懒,直接把本机数据库中的表用sqlyog复制给虚拟机中的数据库,然后开始部署项目,项目一启动提示: Table 'sdmqrt.QRTZ_LOCKS' doesn't ...
- node.js环境搭建
(1)Node.js安装 Node.js安装包及源码下载地址为: https://nodejs.org/download/ , 双击下载后的安装包.msi,检查Node.js版本命令:node - ...