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"> <h3>修改值来查看实时效果:</h3> <div id="controlBar"></div> <button id="load">加载</button> </div> </div> <script > (function(){ class Radar{ fontSyle="12px Arial"; speed = 2; startVal = 0; maxValue = 80; textColor = "rgba(255,255,255,1)"; background={ rect:[ { color:"rgba(56,60,63,0.4)", size:80, }, { color:"rgba(115,115,116,0.3)", size:75, }, ], circle:[ { color:"rgba(66,139,234,0.1)", size:4 }, { color:"rgba(66,139,234,1)", size:2 } ] } customizeBackground = (data)=>{ this.background = data; } setFontStyle = (fontSyle)=>{ this.fontSyle = fontSyle.style; this.textColor = fontSyle.color; } setContextSize = (width,height)=>{ this.el.width=width; this.el.height=height;//设置好canvas的宽高 this.c= {x:width/2,y:height/2}; } setIndex = (index)=>{ this.index = index; } getIndex = function(){ return this.index; } constructor(options){ this.index = options.data; this.el = document.querySelector(options.el); this.ctx = this.el.getContext("2d"); this.maxValue = options.size; } }; Radar.prototype.solveEquations=function(tan,isRight,val){ //解出x位置 var sec2=Math.pow(tan,2)+1; var b2 = 4*Math.pow(sec2,2)*Math.pow(this.c.x,2) ; var ac4 = 4*sec2*(sec2*Math.pow(this.c.x,2)-Math.pow(val,2)) var delta =b2 - ac4; return isRight?(2*sec2*this.c.x+ Math.sqrt(delta))/(2*sec2):(2*sec2*this.c.x- Math.sqrt(delta))/(2*sec2); } Radar.prototype.getPonit=function(n,val){ //get liner equation that we can calculate the position of points var length = this.index.length; var alpha = 360/length; //获得内角度数 if(n==0)return {x:this.c.x,y:this.c.y- val}; // this.defaultValue暂时作为测试数据 var angel=alpha*n+90; //每条直线的角度 // console.log('angel: ',angel); var k = Math.tan(angel*Math.PI/180); //斜率k&tan值 // 分布规则 // 把中心点x做为分界线 var isRight = false; //标记x是否在中心点右边 var cindex = length/2; //偶数情况 if(length%2==0){ if(n==cindex) return {x:this.c.x,y:this.c.y + val}; if(n<cindex) isRight = true; }else{ // 奇数情况 cindex=parseInt(cindex); if(n<=cindex) isRight = true; } var x = this.solveEquations(k,isRight,val); var y = k*(x-this.c.x) + this.c.y; return {x: x, y:y } // 计算出的x值会有两个 , 需要定一个分布规则排除其中一个 // 只要算出x就可以得到y } Radar.prototype.creatPointArr = function(val){ var len = this.index.length; var pointArr =new Array(); for( var i =0 ;i<len ;i++){ pointArr.push(this.getPonit(i,val)); } return pointArr; } Radar.prototype.setBackground=function(){ for(var i = 0;i<this.background.rect.length ;i++){ var gap = 0; if(i>0) gap = Math.abs(this.background.rect[i].size-this.background.rect[i-1].size); this.rectangle(this.creatPointArr(this.startVal-gap)); this.rectangleFill(this.background.rect[i].color); } var pointArr =this.creatPointArr(this.startVal); // //点 this.drawCircle(pointArr) //文本 var pointArr = this.creatPointArr(this.maxValue+10); for( var i =0 ;i<pointArr.length ;i++){ this.setText(this.index[i].name,pointArr[i]); } if(this.........完整代码请登录后点击上方下载按钮下载查看
网友评论0