原生js实现折线图

Posted 2022-07-29 cnblog-shi

不借助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技术。

 

图表框架什么时候使用合适呢？

 

 

 

今天就分享到这，今日留言话题：今天的这个小功能你们学会了吗？一起来说说吧，对于有价值的留言，我们都会一一回复的。如果觉得对你有一丢丢帮助，请点右下角【在看】，让更多人看到该文章。

 

【我们直招】很苦逼，但工资超级高！