原生js实现折线图

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

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

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

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

原文地址:https://www.cnblogs.com/cnblog-shi/p/11371302.html

时间: 2024-11-06 23:14:51

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

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

HTML部分: <div id="banner"> <!--4张滚动的图片--> <div id="inside"> <img src="../../img/14072415363339_0.jpg"><img src="../../img/14072415383924_0.jpg" id="img2" /><img src="..

原生JS轮播图

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 </head> 7 <style> 8 *{ 9 margin:0px; 10 padding:0px; 11 } 12 13 li{ 14 list-style: none; /*取消li默认的前缀*/ 15 } 16 17

原生js轮播图实现

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 * { 8 padding: 0; 9 margin: 0; 10 list-style: none; 11 bor

利用原生JS实现网页1920banner图滚动效果

内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920banner图的切换效果,并针对低分辨率电脑设备进行了适配,实现了JS代码与HTML代码的完全分离,符合w3c的标准使用规范,希望能给各位开发者朋友以帮助和参考.如发现有缺陷和不足,欢迎大家予以指正,如有更好的意见或解决方法,可在评论区交流互动.一下为代码内容: <!DOCTYPE html> <

原生 js 左右切换轮播图

使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或者留言都可以,这个是用 原生写的 轮播图,样式可以写自己喜欢的样式,什么都不用改,只改变样式就行,页面结构的id 要与js的相对应li随便加.li 随便加的意思就是说你可以加无数个图片.每个li 里装一个图片,或者是其他什么元素, <!doctype html> <html lang=&qu

HighCharts绘制JS折线图(后台传数据给前台基于JFinal框架)

/*****************************Controller(基于JFinal框架)**************/ package com.zzu.controller;import java.text.SimpleDateFormat;import java.util.ArrayList;import java.util.List;import org.jfree.chart.ChartFactory;import org.jfree.chart.ChartUtilitie

Morris.js和flot绘制折线图的比较

[文章摘要] 最近用开源的AdminLTE做框架感觉效果特别好,其针对图表库Morris.js和flot都提供了不错的支持,也都提供了这两者的例子.不过Morris.js是基于Raphael.js来的,也就是其使用SVG和VML来绘制图形,而flot则是使用Canvas进行绘制,在绘制效率和浏览器兼容性等方面会有出入,同时两者需要的数据格式也不相同.本文中对两者的使用和性能进行了比较. [文章索引] Morris.js的使用 flot的使用 性能比较 [一.Morris.js的使用] Morri

原生js实现的3个小特效(时钟、轮播图、选项卡)

时钟: <p id="timeTxt"></p>  //将获取到的时间显示在timeTxt这里面        <button onclick="startTime()">关闭</button>        <!--时钟-->        function startTime(){  //创建startTime()函数            var today=new Date();  //定义一个对象

原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那些这些场景都是如何实现的呢?今天,小瑞老师就一口气把所有经典网页特效效果送给大家!!!          全部都是原生JS实现哦~~根本不需要什么JQuery.AngularJS等各种类库,是不是很激动,让我们开始吧~         Tips: 可以收藏博客,保存源码,关键时刻Ctrl+C哦~[微