利用CSS3技术生成统计图。

原理:利用元素的百分比算出旋转度数。类似于斗地主时,手拿扑克牌的形状。

程序源码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
  5. <title> CSS3 chart </title>
  6. <meta name="author" content="rainna" />
  7. <meta name="keywords" content="rainna's css3 lib" />
  8. <meta name="description" content="CSS3 chart" />
  9. <style>
  10. *{margin:0;padding:0;}
  11. body{background:#eee;font-family:Microsoft yahei;line-height:1.6;}
  12. h2{font-weight:normal;}
  13. li{list-style:none;}
  14.  
  15. .g-box{width:600px;margin:30px auto;}
  16. .g-box h2{margin:0 0 20px;}
  17. .m-chart{margin:0 0 50px;}
  18. .m-chart .info li{display:inline-block;margin:0 30px 10px 0;}
  19. .m-chart .info-1{margin:15px 0 0;}
  20. .m-chart .info-1 input{width:100px;height:24px;}
  21.  
  22. .m-chart .chart{position:relative;width:300px;height:300px;margin:30px auto;border-radius:300px;overflow:hidden;}
  23. .m-chart .chart li{position:absolute;left:0;top:0;}
  24. .m-chart .chart .item{width:150px;height:300px;margin:0 0 0 150px;}
  25.  
  26. /* 定义颜色 */
  27. .m-chart .info li:nth-child(1){color:#0092B9;}
  28. .m-chart .info li:nth-child(2){color:#86AD00;}
  29. .m-chart .info li:nth-child(3){color:#F2B705;}
  30. .m-chart .info li:nth-child(4){color:#D97904;}
  31. .m-chart .info li:nth-child(5){color:#BC3603;}
  32. .m-chart .info li:nth-child(6){color:#CF0CC8;}
  33. .m-chart .info li:nth-child(7){color:#33DF08;}
  34. .m-chart .info li:nth-child(8){color:#250CE4;}
  35. .m-chart .chart li:nth-child(1) .item{background:#0092B9;}
  36. .m-chart .chart li:nth-child(2) .item{background:#86AD00;}
  37. .m-chart .chart li:nth-child(3) .item{background:#F2B705;}
  38. .m-chart .chart li:nth-child(4) .item{background:#D97904;}
  39. .m-chart .chart li:nth-child(5) .item{background:#BC3603;}
  40. .m-chart .chart li:nth-child(6) .item{background:#CF0CC8;}
  41. .m-chart .chart li:nth-child(7) .item{background:#33DF08;}
  42. .m-chart .chart li:nth-child(8) .item{background:#250CE4;}
  43.  
  44. /* chart主样式,利用旋转度数来实现,当度数小于或等于180时,li只显示右边的颜色,当度数大于180时,只显示li左边的颜色,右边多出的颜色要裁剪掉 */
  45. .m-chart .chart .item{-webkit-transform-origin:0 50%;} /* 定义旋转的中心,为li的中心,中心即为圆心 */
  46.  
  47. /* 图表旋转度数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) */
  48. .m-chart .chart li:nth-child(1) .item{-webkit-transform:rotate(0deg);}
  49. .m-chart .chart li:nth-child(2) .item{-webkit-transform:rotate(54deg);} /* 0+54 */
  50. .m-chart .chart li:nth-child(3) .item{-webkit-transform:rotate(90deg);} /* 54+36 */
  51. .m-chart .chart li:nth-child(4) .item{-webkit-transform:rotate(136.8deg);} /* 90+46.8 */
  52. /* 当度数大于180时,li右半部分的颜色需要剪切 */
  53. .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);}
  54. .m-chart .chart li:nth-child(5) .item{-webkit-transform:rotate(190.8deg);} /* 136.8+54 */
  55. .m-chart .chart li:nth-child(6) .item{-webkit-transform:rotate(208.8deg);} /* 190.8+18 */
  56. .m-chart .chart li:nth-child(7) .item{-webkit-transform:rotate(280.8deg);} /* 208.8+72 */
  57. .m-chart .chart li:nth-child(8) .item{-webkit-transform:rotate(331.2deg);} /* 280.8+50.4 */
  58. </style>
  59. </head>
  60.  
  61. <body>
  62. <div class="g-box">
  63. <h2>利用CSS3 制图</h2>
  64. <div class="m-chart">
  65. <ul class="info">
  66. <li>AAA:15%</li>
  67. <li>BBB:10%</li>
  68. <li>CCC:13%</li>
  69. <li>DDD:15%</li>
  70. <li>EEE:5%</li>
  71. <li>FFF:20%</li>
  72. <li>GGG:14%</li>
  73. <li>HHH:8%</li>
  74. </ul>
  75. <ul class="chart">
  76. <li>
  77. <div class="item"></div>
  78. </li>
  79. <li>
  80. <div class="item"></div>
  81. </li>
  82. <li>
  83. <div class="item"></div>
  84. </li>
  85. <li>
  86. <div class="item"></div>
  87. </li>
  88. <li>
  89. <div class="item"></div>
  90. </li>
  91. <li>
  92. <div class="item"></div>
  93. </li>
  94. <li>
  95. <div class="item"></div>
  96. </li>
  97. <li>
  98. <div class="item"></div>
  99. </li>
  100. </ul>
  101. <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>
  102. </div>
  103.  
  104. <h2>动态生成图表</h2>
  105. <div class="m-chart">
  106. <p>请输入百分比:只需输入数字,百分号不用输入。</p>
  107. <ul class="info info-1" id="chartipt">
  108. <li>AAA:<input type="text"/></li>
  109. <li>BBB:<input type="text"/></li>
  110. <li>CCC:<input type="text"/></li>
  111. </ul>
  112. <div class="btn"><a href="" id="btn">生成图表</a></div>
  113. <ul class="chart" id="chart"></ul>
  114. </div>
  115. </div>
  116. <script>
  117. var chart = function(){
  118. //公共函数
  119. function T$(id){
  120. return document.getElementById(id);
  121. }
  122. function T$$(root,tag){
  123. return (document || root).getElementsByTagName(tag);
  124. }
  125. function currentStyle(elem, style) {
  126. return elem.currentStyle || document.defaultView.getComputedStyle(elem, null);
  127. }
  128.  
  129. //主类构造函数 fid:为输入框容器id, bid:为图表容器id
  130. var genChart = function(fid,bid){
  131. var self = this;
  132. if(!(self instanceof genChart)){
  133. return new genChart(fid,bid);
  134. }
  135. self.iptContainer = T$(fid); //输入框容器
  136. self.chartContainer = T$(bid); //图表容器
  137. self.ipt = T$$(T$(fid),'input'); //输入框
  138. self.iptCount = self.ipt.length || 0;
  139. }
  140.  
  141. genChart.prototype = {
  142. constructor: genChart,
  143. showChart: function(){
  144. var self = this;
  145. var val = 0;
  146. var node;
  147. if(!!self.chartContainer) this.chartContainer.innerHTML = '';
  148. for(var i=0,l=self.iptCount;i<l;i++){
  149. if(val > 360){
  150. alert('总百分比大于1');
  151. break;
  152. }
  153. node = document.createElement('li');
  154. if(val > 180){ // 当度数大于180时,li右半部分的颜色需要剪切
  155. node.style.clip = 'rect(0,150px,300px,0)';
  156. }
  157. node.innerHTML = '<div class="item" style="-webkit-transform:rotate('+val+'deg);"></div>';
  158. self.chartContainer.appendChild(node);
  159. val += 360*parseInt(self.ipt[i].value)/100;
  160. //如果当前元素的百分比超过50%,则将容器的背景颜色设置为当前元素的背景色,填补空余的颜色
  161. if(self.ipt[i].value > 50) self.chartContainer.style.backgroundColor = currentStyle(self.ipt[i].parentNode).color;
  162. }
  163. }
  164. }
  165.  
  166. return{
  167. onShowChart: function(fid,bid){
  168. //调用主类
  169. var st = genChart(fid,bid);
  170. var btn = T$('btn');
  171. btn.onclick = function(event){
  172. event.preventDefault();
  173. st.showChart();
  174. }
  175. }
  176. }
  177.  
  178. }();
  179.  
  180. chart.onShowChart('chartipt','chart');
  181. </script>
  182. </body>
  183. </html>

源码下载:chart.zip

CSS3 chart的更多相关文章

  1. Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序

    XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS. ...

  2. 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  3. CSS3:线上编辑工具及实用资料整理

    an I Use 个人最常用的,资料比较全,桌面和移动浏览器支持HTML5,CSS3,SVG和兼容性表. 官网地址:http://caniuse.com/ CSS3 Click Chart CSS3 ...

  4. 分享8款最新HTML5/CSS3功能插件及源码下载

    1.HTML5/CSS3鬼脸表情下拉菜单 超级可爱 这款HTML5/CSS3鬼脸表情下拉菜单真的很特别,虽然菜单的实现并没有利用复杂的HTML5/CSS3技术,但是创意的确不错. 在线演示 源码下载 ...

  5. 8款最受欢迎的HTML5/CSS3应用及源码

    新的一周开始,小编也将继续为大家分享精彩的HTML5应用,还有CSS3和jQuery方面的东西.今天给大家带来的是8款最受欢迎的HTML5/CSS3应用及代码,一起来看看吧. 1.基于HTML5 Ca ...

  6. css3前端工具

    随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...

  7. css3工具

    随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...

  8. 36个让人惊讶的 CSS3 动画效果演示【转】

    本文收集了35个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支 ...

  9. 转:35个让人惊讶的 CSS3 动画效果演示

    本文收集了35个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支 ...

随机推荐

  1. C语言中Static和Const关键字的的作用

    程序的局部变量存在于(堆栈)中,全局变量存在于(静态区 )中,动态申请数据存在于( 堆)中. 1.作用于变量: 用static声明局部变量-------局部变量指在代码块{}内部定义的变量,只在代码块 ...

  2. IPv4中IP地址分类

    分三个部分进行讲述: 1 五类IP 2 特殊用途的IP 3 私有IP 1 五类IP IPV4简单粗暴地把IP地址分为五类.分类方法如下图所示: 也就是说,分为以下几类: A: 0.0.0.0-127. ...

  3. 多线程--毕向东java基础教程视频学习笔记

    目录 1.多线程运行的安全问题 2.多线程同步代码块 3.同步方法的锁是this 4.静态同步方法的锁是Class对象 5.单例设计模式(面试中的考点) 6.死锁(一个发生死锁的例子) 多线程运行的安 ...

  4. rowcount和@@Rowcount的区别,获取insert、update、delete影响行数

    rowcount的用法: rowcount的作用就是用来限定后面的sql在返回指定的行数之后便停止处理,比如下面的示例, set rowcount 10select * from 表A 这样的查询只会 ...

  5. 【Java设计模式】java单例模式

    解释一下什么是单例模式:     单例模式确保某个类只有一个实例,而且自行实例化并向整个系统提供这个实例.在计算机系统中,线程池.缓存.日志对象.对话框.打印机.显卡的驱动程序对象常被设计成单例.这些 ...

  6. 「ubuntu」通过无线网络安装Ubuntu Server,启动系统后如何连接无线网络

    接触Ubuntu系统不久,发现无线网络环境下安装Ubuntu Server一个不太人性化的设计:在安装过程中选择无线网卡,即使用无线网络安装(此时需要选择Wi-Fi网络并输入密码),但系统安装完成重启 ...

  7. 初识zookeeper(二)之与Dubbo-admin关联

    1.简介:dubbo-admin,即dubbo管理控制台,管理控制台为内部裁剪版本,开源部分主要包含:路由规则,动态配置,服务降级,访问控制,权重调整,负载均衡,等管理功能,主要是用于Dubbo服务的 ...

  8. GPS 坐标距离计算

    CREATE FUNCTION [dbo].[Rad]( @d float ) RETURNS float BEGIN return @d * PI()/ 180.00; End CREATE FUN ...

  9. Mysql在windows下和linux下对表名大小写默认要求的一个细节

    今天在虚拟机里搭建项目环境,偷了下懒,直接把本机数据库中的表用sqlyog复制给虚拟机中的数据库,然后开始部署项目,项目一启动提示: Table 'sdmqrt.QRTZ_LOCKS' doesn't ...

  10. node.js环境搭建

    (1)Node.js安装 Node.js安装包及源码下载地址为: https://nodejs.org/download/   , 双击下载后的安装包.msi,检查Node.js版本命令:node - ...