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

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

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

【我们直招】很苦逼,但工资超级高!

原生js实现折线图的更多相关文章

  1. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 原生js轮播图

    //用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

  3. 原生JS实现banner图的滚动与跳转

    HTML部分: <div id="banner"> <!--4张滚动的图片--> <div id="inside"> < ...

  4. 用require.js封装原生js轮播图

    index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

  5. 手把手原生js轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  6. chart.js制作折线图

    <!DOCTYPE html> <html> <head> <title></title> </head> <script ...

  7. d3.js画折线图

    下载d3.zip,并解压到网页文件所在的文件夹 windows下,在命令行进入网页文件夹,输入 python -m http.server 在浏览器中输入127.0.0.1:8000/xxx.html ...

  8. canvas+js绘制折线图

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. Vue整合d3.v5.js制作--折线图(line)

    先上效果图(x轴固定为时间轴): 图中出现的悬浮框是鼠标悬停效果 1.环境说明: vue版本:"vue": "^2.5.2" d3版本:"d3&quo ...

  10. 原生js轮播图实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. AppCrawler自动遍历工具,适用于移动端

    AppCrawler下载链接:https://github.com/seveniruby/AppCrawler,主要用途是回归遍历.原则从中间元素开始遍历 AppCrawler框架引擎 appium ...

  2. Bug Bash测试

    愿望 养成参加 Bug Bash 的习惯,就像养成到点就吃饭一样的习惯.   一.Bug Bash 名词解释 A Bug Bash is a collaborative effort across o ...

  3. 【剑指Offer】【树】二叉树中和为某一值的路径

    题目:输入一颗二叉树的根节点和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径.(注意: 在返回值的list中,数组长度大的数 ...

  4. calico 关闭SNAT

    calico 关闭SNAT 默认情况下,calico 访问集群外网络是通过 SNAT 成宿主机 ip 方式,在一些金融客户环境中为了能实现防火墙规则,需要直接针对 POD ip 进行进行规则配置,所以 ...

  5. Centos操作系统在虚拟机VMware上的安装(二)

    a:hover { color: rgba(255, 102, 0, 1) } 1.下载centos操作系统,提供百度云盘链接:http://pan.baidu.com/s/1pLHOR03 2.打开 ...

  6. Qt ui_xxx.h no file or directory

    今天是2023年1.19,22号就过年了,先祝大家新年快乐! 首先经过这几天的研究,出现这个问题,提示其实已经很明显了,就是没找到文件,那么为什么没找到文件呢?基本上就是编译的时候没有找到相应的文件, ...

  7. 通过curl获取当前机器IPv6的外网地址

    curl -XPOST -vB -6 -g "https://10086.cn/web-Center/commonservice/getUserIp.do" -H "Re ...

  8. 比Everything更强的文件搜索工具,支持文件名、文件内容和文件图片上的文字搜索,文件内容搜索工具,文件图片内容搜索工具,OCR图片文本识别搜索,文件快速搜索工具,文字识别文件搜索工具

    Windows自带的文件搜索功能想必不需要过多吐槽,搜索速度简直是在龟爬,所以小编很早之前就在用Everything进行文件搜索了, 不过,今天的主角不是它,而是比它更更更更更强的一款软件! 这款软件 ...

  9. T137288 铸星

    有以下三种情况: 只有一个数,直接输出. 有正数也有复数,那就先让负数撞正数得到更小的负数,直到剩下最后一个正数撞所有的负数,答案是所有数的绝对值之和. 仅有正数或者仅有负数,就先找一对不相等的相邻的 ...

  10. Python_七十二变_二进制和字符编码

    第二章  七十二变 二进制和字符编码 8bit为1byte   字节 1024byte为1KB  千 1024KB为1MB  兆 1024MB为1GB  吉 1024GB为1TB  太 ASCLL字符 ...