About making a simple frame chart using JavaScript-JS Tutorial-php.cn

This article mainly introduces JavaScript to create a simple frame chart in detail, which has certain reference value. Interested friends can refer to it

Story background: I encountered this in the past few days A customer is taking meeting minutes. During each meeting, a specific device will record the speaker's position and display it as an angle value. He gave me the angle values and asked me to make him a diagram showing an approximate position of each person.

The customer thought of using Echarts charts. The first thing I thought of was using Echarts. However, after thinking about his request, I realized that using Echarts to create a simple frame selection chart would be overkill, and There is also so much useless code to import.

So I thought of using canvas to imitate it, but after thinking about it again, canvas was not easy to operate. Can I use ordinary css combined with javascript to make it? This reflection proves that you must use your brain more when doing anything in order to find a simpler way to solve the problem.

Considering that maybe everyone will need it one day, I released it. Note: It has portability and can be moved to any position on the page, and the effect will not change

Let’s take a look at the final effect first:

Figure 1:

Picture 2:

## This little thing will involve few knowledge points. Let’s summarize: js’s trigonometric function, CSS3’s transform, mouse’s Calculation of coordinate axis But if you haven’t heard of it at all, then please go and learn more about it.

Code area

<!doctype html> 
<html> 
<head> 
 <meta charset="utf-8" /> 
 <title>仿Echarts图表</title> 
 <style> 
 * { 
  padding:0; 
  margin:0; 
 } 
 #getcharts { 
  position:relative; 
  width:510px; 
  height:510px; 
 
 } 
 #wrapcharts { 
  list-style:none; 
  height:500px; 
  width:500px; 
  border:2px solid #aaa; 
  border-radius:50%; 
  position:relative; 
  margin:20px auto; 
 } 
 #wrapcharts li { 
  height:10px; 
  width:10px; 
  diaplay:block; 
  position:absolute; 
  cursor:pointer; 
  left:247px; 
  top:2px; 
  height:10px; 
  width:10px; 
  transition:0.2s; 
  background:red; 
  border-radius:50%; 
 } 
 #boxshadow { 
  position:absolute; 
  background:blue; 
  opacity:0.2; 
  height:0; 
  width:0; 
  left:0; 
  top:0; 
 } 
 </style> 
</head> 
<body> 
 
 <ul id="wrapcharts"></ul> 
 <p id="boxshadow"></p> 
 
<script> 
 /* 
 **模拟从后端取值过来的【角度】和相对应的【人名】数组 
 **/ 
 var degArr = [25,88,252,323,33,28,30,90,290,100,300,50,180,205,220,331,195,97,102,77,62,38,32,79]; 
 var nameArr = [&#39;内衣天使&#39;,&#39;小恶魔&#39;,&#39;金正恩&#39;,&#39;奥巴马&#39;,&#39;duolaA梦&#39;,&#39;午夜激情&#39;,&#39;梁静茹&#39;,&#39;刘亦菲&#39;,&#39;琪琪&#39;,&#39;大熊&#39;,&#39;小静&#39;,&#39;小屁孩&#39;,&#39;张三&#39;,&#39;李四&#39;,&#39;王五&#39;,&#39;麻六&#39;,&#39;小明&#39;,&#39;小张&#39;,&#39;丽丽&#39;,&#39;多多&#39;,&#39;瑾瑾&#39;,&#39;biubiu&#39;,&#39;Mr.boluo&#39;,&#39;Hanson&#39;]; 
 /* 
 **声明 getPos(param)函数: 利用三角函数定理根据传入的角度值获取对边和临边的x，y值 
 **/ 
 function getPos(deg) 
 { 
 var X = Math.sin(deg*Math.PI/180)*250 + 245; 
 var Y = -Math.cos(deg*Math.PI/180)*250 + 245; 
 return {x:X,y:Y}; 
 } 
 /* 
 **这里不用说吧，获取页面中的ul，和ul中的li对象，以及框选时的那个任意变动大小的小方块对象 
 **/ 
 var oWrap = document.getElementById(&#39;wrapcharts&#39;); 
 var aLi = oWrap.getElementsByTagName(&#39;li&#39;); 
 var oBox =document.getElementById(&#39;boxshadow&#39;); 
 var allLi = &#39;&#39;; 
 var posArr = []; 
 /* 
 **for循环中调用getPos(param)来获取degArr数组中的所有角度对应的x,y值（就是每个角度对应的x，y坐标），并传入到一个数组中保存，方便取用 
 **/ 
 for(var i=0;i<degArr.length; i++) 
 { 
 posArr.push(getPos(degArr[i])); 
 } 
 /* 
 **for循环根据度数数组degArr的长度插入li小圆点到ul中，并将之前获取的每个点对应的x,y左边插入到行内样式 
 **/ 
 for(var i=0; i<degArr.length; i++) 
 { 
 allLi += &#39;<li style="left:&#39;+posArr[i].x+&#39;px;top:&#39;+posArr[i].y+&#39;px;" title="&#39;+degArr[i]+&#39;°；姓名：&#39;+nameArr[i]+&#39;"></li>&#39;; 
 } 
 oWrap.innerHTML = allLi; 
 /* 
 **遍历最终得到的ul中的li 
 **/ 
 for(var i=0; i<aLi.length; i++) 
 { 
 aLi[i].index = i; 
 /* 
  **封装鼠标移入每个小圆点时的放大事件，这里用到了matrix矩阵，为的事想兼容ie9以下浏览器，但是好像出了点问题 
  */ 
 function focusOn(_this,color, size) 
 { 
  _this.style.background = color; 
  _this.style.WebkitTransform = &#39;matrix(&#39;+size+&#39;, 0, 0, &#39;+size+&#39;, 0, 0)&#39;; 
  _this.style.MozTransform = &#39;matrix(&#39;+size+&#39;, 0, 0, &#39;+size+&#39;, 0, 0)&#39;; 
  _this.style.transform = &#39;matrix(&#39;+size+&#39;, 0, 0, &#39;+size+&#39;, 0, 0)&#39;; 
  _this.style.filter="progid:DXImageTransform.Microsoft.Matrix( M11= "+size+", M12= 0, M21= 0 , M22="+size+",SizingMethod=&#39;auto expend&#39;)"; 
 } 
 aLi[i].onmouseover = function() 
 { 
  //alert(this.offsetLeft); 
  _this = this; 
  focusOn(_this,&#39;blue&#39;, 2); 
 } 
 aLi[i].onmouseout = function() 
 { 
  //alert(this.offsetLeft); 
  _this = this; 
  focusOn(_this,&#39;red&#39;, 1); 
 
 } 
 } 
 /***框选***/ 
 /* 
 **拖拽框选代码区域，这个我就不解释了，明白人都一眼知道什么意思，这就像是公式， 
 */ 
 var allSelect = {}; 
 document.onmousedown = function(ev) 
 { 
 var ev = ev || window.event; 
 var disX = ev.clientX; 
 var disY = ev.clientY; 
 var H = W = clientleft = clienttop = clientright = clientbottom = 0; 
 oBox.style.cssText = &#39;left:&#39;+disX+&#39;px;top:&#39;+disY+&#39;px;&#39;; 
 //console.log(disX+&#39;;&#39;+disY); 
 function again(f) 
 { 
  for(var i=0; i<posArr.length; i++) 
  { 
  if(posArr[i].x > clientleft && posArr[i].y > clienttop && (posArr[i].x + 10) < clientright && (posArr[i].y +10) < clientbottom) 
  { 
   //console.log(clientleft+&#39;;&#39;+ clienttop +&#39;;&#39;+ clientright +&#39;;&#39; + clientbottom); 
   if(f){allSelect[i] = i;}else{ 
   aLi[i].style.background = &#39;blue&#39;; 
   } 
  } else 
  { 
   aLi[i].style.background = &#39;red&#39;; 
  } 
  } 
 
 } 
 
 document.onmousemove = function(ev) 
 { 
  var ev = ev || window.event; 
  /* 
  **当鼠标向四个方向拖拉的时候进行方向判断，并相应的改变小方块的left，top以及width，height 
  **其实我这里有个问题，那就是，代码重复了一些，本想着合并一下，但是作者有点懒，嘿嘿，你们也可以尝试一下 
  **修改后你们拿去当做你们的发布，作者不会介意的 
  */ 
  if(ev.clientX > disX && ev.clientY > disY) 
  { 
  W = ev.clientX - disX; 
  H = ev.clientY - disY; 
 
  oBox.style.width = W + &#39;px&#39;; 
  oBox.style.height = H + &#39;px&#39;; 
 
  clienttop = disY-oWrap.offsetTop; 
  clientleft = disX-oWrap.offsetLeft; 
 
  }else if(ev.clientX < disX && ev.clientY < disY) 
  { 
  W = disX - ev.clientX; 
  H = disY - ev.clientY; 
 
  oBox.style.top = ev.clientY + &#39;px&#39;; 
  oBox.style.left = ev.clientX + &#39;px&#39;; 
 
  oBox.style.width = W + &#39;px&#39;; 
  oBox.style.height = H + &#39;px&#39;; 
 
  clienttop = ev.clientY - oWrap.offsetTop; 
  clientleft = ev.clientX - oWrap.offsetLeft; 
 
  }else if(ev.clientX > disX && ev.clientY < disY) 
  { 
  W = ev.clientX - disX; 
  H = disY - ev.clientY; 
 
  oBox.style.top = ev.clientY + &#39;px&#39;; 
 
  oBox.style.width = W + &#39;px&#39;; 
  oBox.style.height = H + &#39;px&#39;; 
 
  clienttop = ev.clientY - oWrap.offsetTop; 
  clientleft = disX - oWrap.offsetLeft; 
 
  }else if(ev.clientX < disX && ev.clientY > disY) 
  { 
  W = disX - ev.clientX; 
  H = ev.clientY - disY; 
 
  oBox.style.left = ev.clientX + &#39;px&#39;; 
 
  oBox.style.width = W + &#39;px&#39;; 
  oBox.style.height = H + &#39;px&#39;; 
 
  clienttop = disY-oWrap.offsetTop; 
  clientleft = ev.clientX - oWrap.offsetLeft; 
  } 
 
 
  clientright = clientleft+ W; 
  clientbottom = clienttop + H; 
 
  W = &#39;&#39;; 
  H = &#39;&#39;; 
 
  again(); 
 
 } 
 document.onmouseup = function() 
 { 
  again(1); 
 
  document.onmouseup = document.onmousemove = null; 
  oBox.style.cssText = &#39;height:0;width:0;&#39;; 
  if(JSON.stringify(allSelect) == &#39;{}&#39;){return;} 
  console.log(allSelect); 
 
  var lastSelect = []; 
  for(var attr in allSelect){ 
  lastSelect.push(nameArr[attr]); 
  } 
  allSelect = {}; 
 
  console.log(lastSelect); 
  alert(&#39;你选中的人是：\n\n&#39;+lastSelect+&#39;\n\n&#39;); 
 
  for(var i=0; i<aLi.length; i++) 
  { 
  aLi[i].style.background = &#39;red&#39;; 
  } 
 } 
 return false; 
 } 
</script> 
</body> 
</html>

Copy after login

Some knowledge points that will be used to expand

Note: When setting Transform in js, I did not use the scale() method. Because I wanted to be compatible with versions below IE9, I used matrix change. Of course, you can also change it to scale() without any impact.

1. The matrix function matix(a,b,c,d,e,f) under standard browsers and the matrix function progid under ie:DXImageTransform.Microsoft.Matrix(M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expend')

What they have in common: M11 == a; M12 == c; M21 == b; M22 == d

The difference: The matrix function under ie does not have two parameters, e and f. In the matrix function, e and f are used for displacement, which means that displacement cannot be achieved through the matrix function under ie [But here we It seems that no displacement is needed, hehe]

2. Under the standard browser, the initial value of the one-to-one correspondence between a, b, c, d, e, f in the matrix function matrix is: matix(1,0, 0,1,0,0)

3. Scaling through matrix:

x-axis scaling: a = x a c = x c e = x*e

y-axis scaling: b = y b d = y d f = y*f

4. Realize displacement through matrix: [ie no displacement]

x-axis displacement: e = e x

y-axis displacement: f = f y

5. Implement tilt through matrix:

x-axis tilt: c = Math.tan(xDeg/180*Math.PI)

y-axis tilt: b = Math.tan(yDeg/180*Math.PI)

6. Rotation through matrix:

a = Math.cos(deg/180*Math.PI);

b = Math.sin(deg/180*Math.PI);

c = -Math.sin(deg/180*Math.PI);

d = Math. cos(deg/180*Math.PI);

7. As for trigonometric functions, I won’t introduce them, Baidu has a lot of them.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use JS and CSS3 to create cool pop-up window effects

javascript to achieve waterfall flow dynamics Loading images

jQuery implements the function of fixing the top display of the sliding page

The above is the detailed content of About making a simple frame chart using JavaScript. For more information, please follow other related articles on the PHP Chinese website!