标签：效果 折线 帮助 demo 否则 nbsp 知识 连接 -o
不借助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技术。
图表框架什么时候使用合适呢？
今天就分享到这，今日留言话题：今天的这个小功能你们学会了吗？一起来说说吧，对于有价值的留言，我们都会一一回复的。如果觉得对你有一丢丢帮助，请点右下角【在看】，让更多人看到该文章。
【我们直招】很苦逼，但工资超级高！
标签：效果 折线 帮助 demo 否则 nbsp 知识 连接 -o
原文地址：https://www.cnblogs.com/cnblog-shi/p/11371302.html
