不借助 Echarts 等图形框架原生 JS 快速实现折线图效果
1. 折线图效果预览
例如下图所示的折线图效果实现就很简单:
调用下面这段 JS 代码中的方法就好了:
假设页面上需要连接的所有点元素集合是 eleDots, 则页面上执行下 fnLineChart(eleDots) 效果就出来了.
当然, 这段 JS 只处理长度和角度这两个动态属性, 其他固定的样式还需要 CSS 配合, 例如, 线条的粗细和线条颜色, 例如下面这个粗细 2 像素的绿色折线, 可以这样:
2. 斜线效果实现的原理
1) 计算两点之间的直线长度
这个应该属于初中或者高中时候的知识, 勾股定理, a^2 + b^2 = c^2, 直线长度实际上就是 c, 而 a, b 则是两个点的横坐标距离和纵坐标距离, 假设直线前后两个点的坐标分别是 (x1, y1) 和 (x2, y2), 则直线长度为:
2) 计算两点之间的弧度或角度
这个也是属于初中或者高中时候的知识, 已知两个直角边的长度, 求 y 边的对角角度, 我们可以使用 Math.atan() 方法计算出弧度, CSS3 中有专门的弧度单位 rad, 就是用来给旋转使用的, 于是我们可以直接设置:
我们的线条就旋转了. 有些小伙伴习惯使用角度 deg, 也是可以的, 借助 Math.PI 常量再转换下, 代码如下:
3) 设置 transform-origin 变换点
这一步很重要是不可或缺的, 否则线条的位置会有问题, 就是我们需要设置线条旋转的变换点是左边缘居中位置, 如下 CSS 代码:
于是乎, 我们就可以画出两点之间的斜线效果了. 因此, 要实现折线图图表效果, 步骤下面这样:
如果希望移到点元素上有黑色 tips 信息提示, 可以使用 LuLu UI 中的 tips 提示方法, 如果结构合理, 纯 CSS 就可以实现.
3. 简单的图表效果没必要使用框架
本文 demo 展示折线斜线图表效果, 所使用 JS 代码就寥寥几十行, 而且以后也可以复用, 代码量几乎可以不值一提. 但是, 如果就为了这一个小小的功能, 而引入一个巨大的 Highcharts 或者 Echarts JS 文件就成本有些大, 而且 UI 定制这一块也不如手动写写样式来得快.
简单的图表效果完全没必要使用框架, 纯手写手写正好还可以锻炼自己的基本功.
也是可以纯传统 DOM 实现, 无需借助 SVG 或 canvas 技术.
图表框架什么时候使用合适呢?
今天就分享到这, 今日留言话题: 今天的这个小功能你们学会了吗? 一起来说说吧, 对于有价值的留言, 我们都会一一回复的. 如果觉得对你有一丢丢帮助, 请点右下角 [在看] , 让更多人看到该文章.
[我们直招] 很苦逼, 但工资超级高!
来源: http://www.bubuko.com/infodetail-3160400.html