jquery实现圆形百分比技能图表效果代码
代码语言:html
所属分类:图表
代码描述:jquery实现圆形百分比技能图表效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> /* ------ layout -----------------------------------------------*/ html, body { margin: 0; padding: 0; } body { background: #f5f5f5; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333; line-height: 18px; } #content { position: absolute; top: 50%; left: 50%; margin: -340px 0 0 -450px; width: 900px; height: 600px; } .legend { float: left; width: 250px; margin-top: 140px; } #content h1 { font-family: 'Cabin Sketch', arial, serif; text-shadow: 3px 3px 0 #ddd; color: #193340; font-size: 40px; margin-bottom: 40px; text-align: right; } .skills { float: left; clear: both; width: 100%; } .skills ul, .skills li { display: block; list-style: none; margin: 0; padding: 0; } .skills li { float: right; clear: both; padding: 0 15px; height: 35px; line-height: 35px; color: #fff; margin-bottom: 1px; font-size: 18px; } .skills .jq { background: #97BE0D; } .skills .css { background: #D84F5F; } .skills .html { background: #88B8E6; } .skills .php { background: #BEDBE9; } .skills .sql { background: #EDEBEE; } .footer { position: fixed; bottom: 0; left: 0; width: 100%; background: #2D2D2D; color: #EAEAEA; padding: 20px 0; } .footer a { color: #EAEAEA; } .footer a:hover { color: #E4842C; } .footer .inside { font-family: 'Cabin Sketch', arial, serif; font-size: 22px; text-align: center; } #diagram { float: right; width: 600px; height: 600px; } .get { display: none; } /* ------ anchors -----------------------------------------------*/ a { text-decoration: none; color: #333; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/raphael.min.js"></script> <script type="text/javascript"> var o = { init: function() { this.diagram(); }, random: function(l, u) { return Math.floor((Math.random()*(u-l+1))+l); }, diagram: function() { var r = Raphael('diagram', 600, 600), rad = 73, defaultText = 'Skills', speed = 250; r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' }); var title = r.text(300, 300, defaultText).attr({ font: '20px Arial', fill: '#fff' }).toFront(); r.customAttributes.arc = function(value, color, rad) { var v = 3.6*value, alpha = v == 360 ? 359.99: v, random = o.random(91, 240), a = (random-alpha) * Math.PI/180, b = random * Math.PI/180, sx = 300 + rad * Math.cos(b), sy = 300 - rad * Math.sin(b), x = 300 + rad * Math.cos(a), y = 300 - rad * Math.sin(a), path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]]; return { path: path, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0