原生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. Vue企业级优雅实战04-组件开发01-SVG图标组件

    (后续的文章 公众号会提前一周更新,欢迎关注文末的微信公众号:程序员搞艺术) 预览本文的实现效果: # gitee git clone git@gitee.com:cloudyly/dscloudy- ...

  2. 《Java从入门到失业》第四章：类和对象（4.3）：一个完整的例子带你深入类和对象

    4.3一个完整的例子带你深入类和对象 到此为止,我们基本掌握了类和对象的基础知识,并且还学会了String类的基本使用,下面我想用一个实际的小例子,逐步来讨论类和对象的一些其他知识点. 4.3.1需求 ...

  3. rest_framework五大模块

    面向对象封装 面向对象封装导入 # 1.将子类共有的方法抽离形成父类方法 # 2.子类使用共有方法,使用的是父类方法 # 3.共有方法中的资源,在子类使用方法时,获取的是子类资源 class MyCl ...

  4. Oracle学习（三）SQL高级--表结构相关（建表、约束）

    一.建表语句 CREATE DATABASE(创建数据库) --创建数据库 create database 数据库名字; CREATE TABLE(创建表) --创建表 CREATE TABLE 表名 ...

  5. 浅入webpack

    webpack.base.conf---webpack基础配置: f利用各种文件对项目中的文件进行处理 利用loader,preloader对工程文件进行处理,输出新的工程文件(options中对文件 ...

  6. 刷题[WUSTCTF2020]CV Maker

    解题思路 好家伙,打开一看像是cms,又看名字CV Maker.我以为直接要搜cve打了.搜了一会发现没什么啊.那先正常做把. 注册 注册成功后这里报错,猜测可能有注入点.先放在这里,继续登陆.发现是 ...

  7. mysql-9-limit

    #进阶9:分页查询 /* 当要显示的数据,一页显示不全,需要分页提交sql请求 SELECT FROM JOIN ON WHERE GROUP BY HAVING ORDER BY LIMIT off ...

  8. selenium-自动化测试51job网站（MacOS + Safari）2020年10月6日

    登录 51job ,http://www.51job.com 输入搜索关键词 "python", 地区选择 "杭州"(注意,如果所在地已经选中其他地区,要去掉) ...

  9. P4231 三步必杀

    题目描述 问题摘要: N个柱子排成一排,一开始每个柱子损伤度为0. 接下来勇仪会进行M次攻击,每次攻击可以用4个参数l,r,s,e来描述: 表示这次攻击作用范围为第l个到第r个之间所有的柱子(包含l, ...

  10. 【题解】「MCOI-02」Convex Hull 凸包

    题目戳我 \(\text{Solution:}\) \[\sum_{i=1}^n \sum_{j=1}^n \rho(i)\rho(j)\rho(\gcd(i,j)) \] \[=\sum_{d=1} ...