關於JavaScript製作簡單的框選圖表-js教程-PHP中文網

首頁

web前端

js教程

關於JavaScript製作簡單的框選圖表

不言

Jun 25, 2018 pm 04:05 PM

這篇文章主要為大家詳細介紹了JavaScript製作一個簡單的框選圖表，具有一定的參考價值，有興趣的小夥伴們可以參考一下

故事背景：這幾天遇到一個客戶，是做會議記錄的，每次會議過程中，都會有特定設備記錄下講話人的位置以角度值顯示。他給我角度值，讓我給他做一個圖表來展示每個人的一個大概位置。

客戶想到的是用Echarts 圖表來做，我首先想到的也是用Echarts ，但是思考了他的要求以後，發現就一個簡單的框選圖表用Echarts 來做是不是大材小用了，而且還要導入那麼多的沒用的程式碼。

於是我想到了用 canvas 畫布來仿著做，但又考慮了一下， canvas 操作起來不順手；究竟可不可以用普通的css結合 javascript 來把它做出來呢？此番思考驗證了：任何事情一定要多動腦，才能碰到更簡單的解決問題的方式。

考慮到也許某天大家用得著，所以發佈出來。註：擁有可移植性，可移到頁面任何位置，效果不會改變

先看最終效果吧：

圖一：

圖二：

這個小東西會涉及的知識點不多,歸納一下： js的三角函數、 CSS3的transform 、滑鼠的座標軸XY的計算...啊哈，差不多大體就這三方面的知識吧，如果你都只是有過了解也沒關係，因為都只用的到皮毛所以不必擔心。但如果完全沒聽過，那就請您再去了解這方面知識。

程式碼區域

<!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>

登入後複製

#會用到的一些知識點拓展

註：在js中設定Transform的時候我用到的不是scale()方法，因為我想要相容ie9以下的版本所以用了矩陣變化。當然，你們也可以改為scale()，毫無影響。

1.在標準瀏覽器下的矩陣函數matix(a,b,c,d,e,f)、ie下的矩陣函數progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expend')

他們的共同點：M11 == a; M12 == c; M21 == b; M22 == d

不一樣的地方：ie下的矩陣函數沒有e 和f 兩個參數，在矩陣函數中e 和f 是用來位移的，也就是說ie下沒法透過矩陣函數來實現位移[ 不過我們在這裡好像不需要位移，嘿嘿]

2.在標準瀏覽器下矩陣函數matrix中a,b,c,d,e,f 一一對應的的初始值為：matix(1,0, 0,1,0,0)

3.透過矩陣實現縮放：

x軸縮放：a = x a c = x c e = x*e

y軸縮放：b = y b d = y d f = y*f

4.透過矩陣實現位移：[ie下沒位移]

x軸位移：e = e x

y軸位移：f = f y

5.透過矩陣實現傾斜：

x軸傾斜：c = Math.tan(xDeg/180*Math.PI)

y軸傾斜：b = Math.tan(yDeg/180*Math.PI)

6.透過矩陣實現旋轉：

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.至於三角函數我就不介紹了，百度一大把。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

熱AI工具

熱工具

熱門話題

Java教學

1665

CakePHP 教程

1424

Laravel 教程

1321

PHP教程

1269

C# 教程

1249

Related knowledge

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

如何使用PHP和JS創建股票蠟燭圖 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形，透過繪製股票的開盤價、收盤價、最高價和最低價等數據，幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖，並附上具體的程式碼範例。一、準備工作在開始之前，我們需要準備以下環境：1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

如何使用JS和百度地圖實現地圖平移功能 Nov 21, 2023 am 10:00 AM

如何使用JS和百度地圖實現地圖平移功能百度地圖是一款廣泛使用的地圖服務平台，在Web開發中經常用於展示地理資訊、定位等功能。本文將介紹如何使用JS和百度地圖API實作地圖平移功能，並提供具體的程式碼範例。一、準備工作使用百度地圖API前，首先需要在百度地圖開放平台（http://lbsyun.baidu.com/）上申請一個開發者帳號，並建立一個應用程式。創建完成

如何使用JS和百度地圖實現地圖點擊事件處理功能 Nov 21, 2023 am 11:11 AM

如何使用JS和百度地圖實現地圖點擊事件處理功能概述：在網路開發中，經常需要使用地圖功能來展示地理位置和地理資訊。而地圖上的點擊事件處理是地圖功能中常用且重要的一環。本文將介紹如何使用JS和百度地圖API來實現地圖的點擊事件處理功能，並給出具體的程式碼範例。步驟：匯入百度地圖的API檔案首先，要在HTML檔案中匯入百度地圖API的文件，可以透過以下程式碼實現：

如何使用JS和百度地圖實現地圖熱力圖功能 Nov 21, 2023 am 09:33 AM

如何使用JS和百度地圖實現地圖熱力圖功能簡介：隨著互聯網和行動裝置的快速發展，地圖成為了普遍的應用場景。而熱力圖作為一種視覺化的展示方式，能夠幫助我們更直觀地了解數據的分佈。本文將介紹如何使用JS和百度地圖API來實現地圖熱力圖的功能，並提供具體的程式碼範例。準備工作：在開始之前，你需要準備以下事項：一個百度開發者帳號，並建立一個應用，取得到對應的AP

PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

js和vue的關係 Mar 11, 2024 pm 05:21 PM

js和vue的關係：1、JS作為Web開發基石；2、Vue.js作為前端框架的崛起；3、JS與Vue的互補關係；4、JS與Vue的實踐應用。

See all articles

關於JavaScript製作簡單的框選圖表

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題