189 8069 5689

JavaScript制作简单的框选图表

故事背景:这几天遇到一个客户,是做会议记录的,每次会议过程中,都会有特定设备记录下讲话人的位置以角度值显示。他给我角度值,让我给他做一个图表来展示每个人的一个大概位置。

创新互联专业为企业提供贡觉网站建设、贡觉做网站、贡觉网站设计、贡觉网站制作等企业网站建设、网页设计与制作、贡觉企业网站模板建站服务,十多年贡觉做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

客户想到的是用 Echarts 图表来做,我首先想到的也是用 Echarts ,但是思考了他的要求以后,发现就一个简单的框选图表用 Echarts 来做是不是大材小用了,而且还要导入那么多的没用的代码。

于是我想到了用 canvas 画布来仿着做,但又考虑了一下, canvas 操作起来不顺手;究竟可不可以用普通的css结合 javascript 来把它做出来呢?此番思考验证了:任何事情一定要多动脑,才能 碰到更简单的解决问题的方式。

考虑到也许某天大家用得着,所以发布出来。注:拥有可移植性,可移到页面任何位置,效果不会改变

先看最终效果吧:

图一:

JavaScript制作简单的框选图表JavaScript制作简单的框选图表

图二:

JavaScript制作简单的框选图表

这个小东西会涉及的知识点不多,归纳一下: js的三角函数 、 CSS3的transform 、 鼠标的坐标轴XY的计算 ...啊哈,差不多大体就这三方面的知识吧,如果你都只是有过了解也没关系,因为都只用的到皮毛所以不必担心。但是如果完全没听过,那就请您再去了解一下这方面知识。

代码区域

 
 
 
  
 仿Echarts图表 
  
 
 
 
 

    会用到的一些知识点拓展

    注:在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.至于三角函数我就不介绍了,百度一大把。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


    文章标题:JavaScript制作简单的框选图表
    链接URL:http://cdxtjz.cn/article/gjheeh.html

    其他资讯