不借助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. Google Earth Engine——基于改进的RSEI评估生态环境(水体掩膜后)

    未经允许,禁止随意转载,尊重他人版权,仅供学习参考,欢迎交流. 背景介绍 遥感生态指数(Remote Sensing Ecological Index)的获得,是使用主成分分析法耦合了绿度.湿度.干度 ...

  2. Mysql数据库基础第四章DDL(数据定义语言):库表的管理、数据类型与约束条件

    Mysql数据库基础系列 软件下载地址 提取码:7v7u 数据下载地址 提取码:e6p9 mysql数据库基础第一章:(一)数据库基本概念 mysql数据库基础第一章:(二)mysql环境搭建 mys ...

  3. 【C学习笔记】day4-1 在屏幕上输出以下图案

    1.在屏幕上输出以下图案: * *** ***** ******* ********* *********** ************* *********** ********* ******* ...

  4. 【面试必备】 【ES6】学Vue前必须掌握的内容(上)

    变量声明 采用 let 和 const 分别声明变量和常量. 不用var所以不存在变量提升. 解构 ① 数组解构[ ] 等号左边允许存在默认值.变量的取值按照顺序. //之前的写法 var arr=[ ...

  5. vite中使用img标签

    <img class="icon-logo" :src="iconsUrl[imgName]" alt="" /> const ...

  6. 配置hive

  7. minio对象存储集群安装

    环境:centos7.6 .两台服务器部署4个节点集群 minio简介: MinIO 是一个基于Apache License v2.0开源协议的对象存储服务.它兼容亚马逊S3云存储服务接口,非常适合于 ...

  8. 在Github上搭建个人主页

    最近试着在github上搭建个人主页,没用github给的模板,用的是自己在网上找到那种类似个人主页的模板,到时候直接上传到仓库里就行了 首先先创建仓库,点击右上角的加号,选择New reposito ...

  9. ADE-XL bsub提交超时

    查找命令行log, Fatal server error: could not open default font 'fixed' 解决方案: yum install 'xorg-x11-font*'

  10. 配置VS Code链接外部gsl库文件

    配置VS code在C语言中调用gsl库文件 gsl安装 sudo apt-get install libgsl0-dev 先确认gsl库,gcc都已正确安装,命令行 gcc -L/usr/local ...