原生JS实现动态折线图

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>原生JS实现动态折线图</title>

	</head>

	<body>

	<canvas id="canvas"></canvas>

		<script>

			let N = new CreateMovingLineDiagram();

			//N.SetData.cavaswidth = 800//改变canvas宽度

			N.play();

			function CreateMovingLineDiagram() {

				let _this = this;

				//默认参数

				_this.SetData = {

					canvasid: "#canvas",// 画布ID

					canvaswidth: 600,//画布宽度

					canvasheight: 400,//画布高度

					segmentationNum: 50,//分段数，将画布宽度分割成多少分

					MoveSpeed: 100,//移动速度

					IsShowsegmentationBool: true,//是否开启分段显示

					IsCurveBool: true//true使用曲线绘图，false使用直线绘图

				}

				_this.play = function() {

					let canvas = document.querySelector(_this.SetData.canvasid); //获取Canvas元素

					canvas.width = _this.SetData.canvaswidth; //设置画布宽

					canvas.height = _this.SetData.canvasheight; //设置画布高

					let context = canvas.getContext("2d"); //使用Context绘画2D

					let segmentation = _this.SetData.segmentationNum //分段数

					let Speed = _this.SetData.MoveSpeed //绘画速度

					let XYAttr = []; //分段坐标数组

					let XZ = canvas.width / segmentation //得到每一段的X坐标

					let XW = 0; //已生成的X坐标

					let IsShowsegmentation = _this.SetData.IsShowsegmentationBool; //是否显示分段线

					let IsCurve = _this.SetData.IsCurveBool; //是否绘画曲线

					//进入页面先创建空数组

					for (var i = 0; i < segmentation + 1; i++) {

						XYAttr.push({

							"X": XW,

							"Y": canvas.height / 2

						})

						if (XW != canvas.width) {

							XW += XZ;

						}

					}

					setInterval(function() {

						canvas.height = canvas.height; //先清除画布

						if (IsShowsegmentation) {

							for (var i = 0; i < segmentation + 1; i++) {

								//画线

								context.moveTo((i * XZ), 0);

								context.lineTo((i * XZ), canvas.height)

								context.strokeStyle = "#aaa";

								context.stroke();

								context.beginPath();

							}

						}

						for (var i = 0; i < XYAttr.length; i++) {

							if (IsCurve) {

								//绘制曲线

								if (i > 0) {

									context.beginPath();

									context.moveTo(XYAttr[i - 1].X, XYAttr[i - 1].Y);

									context.quadraticCurveTo(XYAttr[i - 1].X, XYAttr[i].Y, XYAttr[i].X, XYAttr[i].Y);

								}

							} else {

								//绘制直线

								if (i > 0) {

									context.beginPath();

									context.moveTo(XYAttr[i - 1].X, XYAttr[i - 1].Y);

									context.lineTo(XYAttr[i].X, XYAttr[i].Y)

								}

							}

							context.strokeStyle = "coral";

							context.stroke();

						}

						XYAttr.splice(0, 1);

						//随机数据

						round = Math.floor(Math.random() * canvas.height);

						for (var i = 0; i < XYAttr.length; i++) {

							XYAttr[i].X = XYAttr[i].X - (XZ * 2)

						}

						XYAttr.push({

							"X": XW,

							"Y": round

						})

					}, Speed)

				}

			}

		</script>

	</body>

</html>

效果图

基础代码就是以上写的了，更多高级拓展靠你们的脑袋了，如大佬有更好的做法可以在评论和我说，感激不尽

原生JS实现动态折线图的更多相关文章

  1. 原生js焦点轮播图的实现

    继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

  2. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  3. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  4. 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

    超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...

  5. achartengine画出动态折线图

    achartengine画出动态折线图的效果最近有个项目需要用到实时曲线图,我也上网搜索了一下,最后还是选择使用achartengine这个现成的东西,毕竟自己再canvas一下实在是太麻烦,而且项目 ...

  6. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  7. 原生js手动轮播图

    手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一 ...

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

    内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...

  9. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

随机推荐

  1. MySQL安装错误Couldn't find MySQL server

    Starting MySQL ERROR! Couldn't find MySQL server (/usr/local/mysql/bin/mysqld_safe) 昨天rpm安装MySQL5.7后 ...

  2. Docker之使用Dockerfile创建定制化镜像（四）

    Dockerfile简介 镜像的定制实际上就是定制每一层所添加的配置.文件.如果我们可以把每一层修改.安装.构建.操作的命令都写入一个脚本,用这个脚本来构建.定制镜像,那么哪些无法重复的问题.镜像构建 ...

  3. 6.Exchanger-交换机

  4. 栈的Java实现-分别使用数组和链表

    栈是非常重要的数据结构,栈具有后进先出的特点. 在JVM内部,每个线程维护一个栈,对于每个方法调用,入栈一个元素,成为栈帧,当方法执行完成后,对应的栈帧出栈. 栈帧中,也包含一个栈,称为操作数栈. 一 ...

  5. Qt 展示pdf内容（新窗口或嵌入，pdfjs，linux）

    前言:初学Qt,在网上查找了诸多资料,有什么poppler.mupdf啊巴拉巴拉的,结果一个比一个费劲,最后还是采用pdfjs较为方便高效,为方便相关问题搜索,写了一下内容. 需求描述:Qt应用中不支 ...

  6. ==、equals()、hashcode()的关系和区别

    ==.equals().hashcode()概念 ==:它的作用是判断两个对象的地址是不是相等.即,判断两个对象是不试同一个对象. equals():它的作用也是判断两个对象是否相等.但它一般有两种使 ...

  7. 正则表达式基础(Regular Expression)

    正则表达式简介 n  为什么需要正则表达式? q  文本的复杂处理. n  正则表达式的优势和用途? q  一种强大而灵活的文本处理工具: q  提供了一种紧凑的.动态的方式,能够以一种完全通用的方式 ...

  8. Servlet中关于中文乱码

    一.客户端请求服务器的数据有乱码 1.get方式请求 ①修改tomcat/conf/server.xml,在<Connector> 标签中添加属性useBodyEncodingForURI ...

  9. 解决pycharm py文件运行后停止按钮变成了灰色的问题

  10. Tomcat 8.5集群配置

    示例 <Cluster className="org.apache.catalina.ha.tcp.SimpleTcpCluster" channelSendOptions= ...