不借助Echarts等图形框架原生JS快速实现折线图效果canvas
1. 折线图效果预览框架
例以下图所示的折线图效果实现就很简单：orm
调用下面这段JS代码中的方法就行了：ip
假设页面上须要链接的全部点元素集合是eleDots，则页面上执行下fnLineChart(eleDots)效果就出来了。form
固然，这段JS只处理长度和角度这两个动态属性，其余固定的样式还须要CSS配合，例如，线条的粗细和线条颜色，例以下面这个粗细2像素的绿色折线，能够这样：Highcharts
2. 斜线效果实现的原理原理
1）计算两点之间的直线长度transform
这个应该属于初中或者高中时候的知识，勾股定理，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技术。
图表框架何时使用合适呢？
今天就分享到这，今日留言话题：今天的这个小功能大家学会了吗？一块儿来讲说吧，对于有价值的留言，咱们都会一一回复的。若是以为对你有一丢丢帮助，请点右下角【在看】，让更多人看到该文章。
【咱们直招】很苦逼，但工资超级高！