原生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. Docker实战（7）:Docker无日志（无*-json.log文件）

    出现这种情况基本都是docker 版本太旧,我的处理方案就是将docker 版本升级到最新,然后重新docker run 一遍就会有了.注意:docker 升级后,原来images,容器会出现一些小问 ...

  2. Magento中数据拷贝一实现

    Mage_Sales_Model_Quote::setCustomer方法,有这么一行代码 Mage::helper('core')->copyFieldset('customer_accoun ...

  3. 浅入webpack

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

  4. Python 3 入门，看这篇就够了（超全整理）

    史上最全Python资料汇总(长期更新).隔壁小孩都馋哭了 --- 点击领取 今天和大家分享的内容是Python入门干货,文章很长. 简介 Python 是一种高层次的结合了解释性.编译性.互动性和面 ...

  5. GAN在seq2seq中的应用 Application to Sequence Generation

    Improving Supervised Seq-to-seq Model 有监督的 seq2seq ,比如机器翻译.聊天机器人.语音辨识之类的 . 而 generator 其实就是典型的 seq2s ...

  6. Matlab中num2str函数的用法

    转载:https://blog.csdn.net/SMF0504/article/details/51836062 函数功能: 把数值转换成字符串, 转换后可以使用fprintf或disp函数进行输出 ...

  7. DevOps元素周期表—2号元素Kibana

    Kibana 是一款开源的数据分析和可视化平台,它是 Elastic Stack 成员之一,设计用于和 Elasticsearch 协作.您可以使用 Kibana 对 Elasticsearch 索引 ...

  8. Python之路——变量

    什么是变量 #变量即变化的量,核心是"变"与"量"二字,变即变化,量即衡量状态. 为什么要有变量 #程序执行的本质就是一系列状态的变化,变是程序执行的直接体现, ...

  9. 硬盘安装Linux

    准备材料:U盘.Linux镜像.UltraISO 1.下载安装UltraISO, 2.打开系统镜像 打开后我们就可以在左边侧栏看到镜像的内容 3.插入U盘,点击:启动->写入光盘映像->选 ...

  10. 极客 Play 玩 Terminal——GitHub 热点速览 Vol.40

    作者:HelloGitHub-小鱼干 多少人以为暗黑的终端便是一名程序员的工作台,其实上,终端可以不只是一个输入 command 的界面,也可以是本周特推 kb 一样,面向极客的极简命令行知识库管理器 ...