原生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. 记tp5.1使用composer PhpOffice的xlsx表格文件导入数据库

    在项目环境下composer require phpoffice/phpspreadsheet在项目中引用use PhpOffice\PhpSpreadsheet\IOFactory; 下面是 上传x ...

  2. Express下ejs的视图模板引擎的建立

    写在前面 由于Express升级到4.0,将ejs的用法忽略,改为用户自定义形式,所以要引入库index.js作为引擎,来支持ejs的模板引擎(点击下载). 首先是建立一个名字叫nodeitem,引擎 ...

  3. 关于java中循环的学习

    switch 值是固定的 效率高语法:switch (表达式) { case 常量 1: 语句; break; case 常量 2: 语句; break; … default: 语句; break;} ...

  4. openstack核心组件——horizon Web管理界面（10）

    一.horizon 介绍: 理解 horizon Horizon 为 Openstack 提供一个 WEB 前端的管理界面 (UI 服务 )通过 Horizone 所提供的 DashBoard 服务 ...

  5. Gradle系列之Android Gradle高级配置

    本篇文章主要在之前学习的基础上,从实际开发的角度学习如何对 Android Gradle 来进行自定义以满足不同的开发需求,下面是 Gradle 系列的几篇文章: Gradle系列之初识Gradle ...

  6. Git【常见知识点速查】

    文章更新时间:2020/06/17 一.基础知识点解析 Git工作流程 以上包括一些简单而常用的命令,但是先不关心这些,先来了解下面这4个专有名词. Workspace:工作区 Index / Sta ...

  7. vulnhub-Os-hackNos-2

    vulnhub-Os-hackNos-2 开局扫主机,发现141是存活的,进行nmap扫描,获取端口信息. 发现22,80端口开放,进行目录爆破. 发现tsweb,浏览器访问,推测是wordpress ...

  8. Linux基本命令学习

    对操作系统进行信息查询 硬盘大小 查看磁盘信息:  fdisk -l/dev/sda       操作系统中第一块硬盘的名称以及所在路径linux操作系统中一切皆文件(文件名)        sd(硬 ...

  9. Python 中的是那种路径

    1.1 操作系统文件绝对路径 django 静态文件查找, 模板查找(第一种)   # 去配置好的 文件夹 中查找指定的文件 BASE_DIR = os.path.dirname(os.path.di ...

  10. Centos-yum软件包安装-yum

    yum 自动安装相关软件依赖,可以同时配置多个yum源,初始启动yum时候首先会缓存资源包到 /var/cache/yum目录下 yum确认 -y yum安装和卸载 install 安装,自动安装软件 ...