關於JavaScript製作簡單的框選圖表
- 不言原創
- 2018-06-25 16:05:081225瀏覽
這篇文章主要為大家詳細介紹了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 = ['内衣天使','小恶魔','金正恩','奥巴马','duolaA梦','午夜激情','梁静茹','刘亦菲','琪琪','大熊','小静','小屁孩','张三','李四','王五','麻六','小明','小张','丽丽','多多','瑾瑾','biubiu','Mr.boluo','Hanson'];
/*
**声明 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('wrapcharts');
var aLi = oWrap.getElementsByTagName('li');
var oBox =document.getElementById('boxshadow');
var allLi = '';
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 += '<li style="left:'+posArr[i].x+'px;top:'+posArr[i].y+'px;" title="'+degArr[i]+'°；姓名：'+nameArr[i]+'"></li>';
}
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 = 'matrix('+size+', 0, 0, '+size+', 0, 0)';
_this.style.MozTransform = 'matrix('+size+', 0, 0, '+size+', 0, 0)';
_this.style.transform = 'matrix('+size+', 0, 0, '+size+', 0, 0)';
_this.style.filter="progid:DXImageTransform.Microsoft.Matrix( M11= "+size+", M12= 0, M21= 0 , M22="+size+",SizingMethod='auto expend')";
}
aLi[i].onmouseover = function()
{
//alert(this.offsetLeft);
_this = this;
focusOn(_this,'blue', 2);
}
aLi[i].onmouseout = function()
{
//alert(this.offsetLeft);
_this = this;
focusOn(_this,'red', 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 = 'left:'+disX+'px;top:'+disY+'px;';
//console.log(disX+';'+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+';'+ clienttop +';'+ clientright +';' + clientbottom);
if(f){allSelect[i] = i;}else{
aLi[i].style.background = 'blue';
}
} else
{
aLi[i].style.background = 'red';
}
}
}
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 + 'px';
oBox.style.height = H + 'px';
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 + 'px';
oBox.style.left = ev.clientX + 'px';
oBox.style.width = W + 'px';
oBox.style.height = H + 'px';
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 + 'px';
oBox.style.width = W + 'px';
oBox.style.height = H + 'px';
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 + 'px';
oBox.style.width = W + 'px';
oBox.style.height = H + 'px';
clienttop = disY-oWrap.offsetTop;
clientleft = ev.clientX - oWrap.offsetLeft;
}
clientright = clientleft+ W;
clientbottom = clienttop + H;
W = '';
H = '';
again();
}
document.onmouseup = function()
{
again(1);
document.onmouseup = document.onmousemove = null;
oBox.style.cssText = 'height:0;width:0;';
if(JSON.stringify(allSelect) == '{}'){return;}
console.log(allSelect);
var lastSelect = [];
for(var attr in allSelect){
lastSelect.push(nameArr[attr]);
}
allSelect = {};
console.log(lastSelect);
alert('你选中的人是：\n\n'+lastSelect+'\n\n');
for(var i=0; i<aLi.length; i++)
{
aLi[i].style.background = 'red';
}
}
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中文網！
相關推薦：
##
以上是關於JavaScript製作簡單的框選圖表的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn