goodman原生js实现自定义雷达图效果代码
代码语言:html
所属分类:图表
代码描述:goodman原生js实现自定义雷达图效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>demo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <style> body{ background-color: #292929; } .tab{ margin-top: 50px; background-color: #fff; font-size: 15px; margin-left: 50%; transform: translateX(-50%); display: inline-block; box-sizing: border-box; } .tab_header{ position: relative; background: url('//repo.bfw.wiki/bfwrepo/image/5e5ef0b278727.png'); background-size:cover; } .tab_header a{ width: 64px; height: 64px; position: absolute;; left: 50%; top: 50%; margin-left: -32px;; margin-top: -30px; display: block; z-index: 1; background-size: 100%; } .tab_header>a>img{ width: 100%; height: 100%; display: block; } .tab_main{ padding: 5px 10px; box-sizing: border-box; } .tab_main>p{ color: #848484; box-sizing: border-box; } #controlBar{ } #myCanvas{ margin: 0 auto; } input{ width: 100px; border: none; background-color: #eee;; padding: 5px; } #controlBar label{ margin: 0 10px; } #controlBar div{ padding: 5px; } .tab_main button{ width: 100%; margin: 10px 0; } </style> </head> <body> <div class="tab"> <div class="tab_header"> <canvas id="myCanvas"></canvas> </div> <div class="tab_main"> &l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0