故事背景:这几天遇到一个客户,是做会议记录的,每次会议过程中,都会有特定设备记录下讲话人的位置以角度值显示。他给我角度值,让我给他做一个图表来展示每个人的一个大概位置。
客户想到的是用Echarts图表来做,我首先想到的也是用Echarts,但是思考了他的要求以后,发现就一个简单的框选图表用Echarts来做是不是大材小用了,而且还要导入那么多的没用的代码。
于是我想到了用帆布画布来仿着做,但又考虑了一下,帆布操作起来不顺手;究竟可不可以用普通的css结合javascript来把它做出来呢?此番思考验证了:任何事情一定要多动脑,才能碰到更简单的解决问题的方式。
考虑到也许某天大家用得着,所以发布出来。注:拥有可移植性,可移到页面任何位置,效果不会改变
先看最终效果吧:
图一:
图二:
这个小东西会涉及的知识点不多,归纳一下:js的三角函数,CSS3的变换,鼠标的坐标轴XY的计算啊…哈,差不多大体就这三方面的知识吧,如果你都只是有过了解也没关系,因为都只用的到皮毛所以不必担心。但是如果完全没听过,那就请您再去了解一下这方面知识。
代码区域
& lt; !doctype html>
& lt; html>
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt; title>仿Echarts图表& lt;/title>
& lt; style>
* {
填充:0;
保证金:0;
}
# getcharts {
位置:相对;
宽度:510 px;
身高:510 px;
}
# wrapcharts {
list-style:没有;
身高:500 px;
宽度:500 px;
边界:2 px固体# aaa级;
这个特性:50%;
位置:相对;
保证金:20 px汽车;
}
李# wrapcharts {
高度:10 px;
宽度:10 px;
diaplay:块;
位置:绝对的;
光标:指针;
左:247 px;
上图:2 px;
高度:10 px;
宽度:10 px;
过渡:0.2秒;
背景:红色;
这个特性:50%;
}
# boxshadow {
位置:绝对的;
背景:蓝色;
透明度:0.2;
高度:0;
宽度:0;
左:0;
上图:0;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; ul id=" wrapcharts "祝辞& lt;/ul>
& lt; div id=" boxshadow "祝辞& lt;/div>
& lt; script>/*
* *模拟从后端取值过来的【角度】和相对应的【人名】数组
* */var degArr=[25, 88252323, 33岁,28岁,30岁,90290100300年,50180205220331195年,97102年,77年,62年,38岁,32岁,79年);
var nameArr=['内衣天使”,“小恶魔”、“金正恩”、“奥巴马”、“duolaA梦”,“午夜激情”,“梁静茹的,”刘亦菲”,“琪琪”,“大熊”,“小静”,“小屁孩”、“张三”,“李四”,“王五”、“麻六”、“小明”,“小张”、“丽丽”,“多”多,“瑾瑾’,‘biubiu’,‘Mr.boluo ', '汉森'];/*
* *声明getPos(参数)函数:利用三角函数定理根据传入的角度值获取对边和临边的x, y值
* */函数getPos(度)
{
var X=sin(度* Math.PI/180) * 250 + 245;
var Y=-Math.cos(度* Math.PI/180) * 250 + 245;
返回{x, x, y, y};
}/*
* *这里不用说的吧,获取页面中的ul、和ul中李的对象,以及框选时的那个任意变动大小的小方块对象
* */var oWrap=. getelementbyid (“wrapcharts”);
阿里var=oWrap.getElementsByTagName(‘李’);
var oBox=. getelementbyid (“boxshadow”);
var allLi=";
var posArr=[];/*
* *的循环中调用getPos(参数)来获取degArr数组中的所有角度对应的x, y值(就是每个角度对应的x, y坐标),并传入到一个数组中保存,方便取用
* */我(var=0; i< degArr.length;我+ +)
{
posArr.push (getPos (degArr[我]));
}/*
* *的循环根据度数数组degArr的长度插入李小圆点到ul中,并将之前获取的每个点对应的x, y左边插入到行内样式
* */(var=0;i”;
}
oWrap。innerHTML=allLi;/*
* *遍历最终得到的ul中李的
* */(var=0;i
