原生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. 记录openssl和openssh升级中遇到的问题以及解决方法

    本文档讲述的升级操作是基于操作系统centos6.5,使用的openssl版本是openssl-1.0.2l.tar.gz,openssh版本是openssh-7.6p1.tar.gz. 1. 依赖检 ...

  2. 回归 | js实用代码片段的封装与总结（持续更新中...）

      上一次更博还是去年10月28号了,截至今天已经有整整4个月没有更新博客了,没更新博客不是代表不学了,期间我已经用vue做了两个项目,微信小程序做了一个项目,只是毕竟找到工作了,想偷偷懒,你懂的. ...

  3. Linux实战（12）：解决Centos7 docker 无法自动补全

    环境:centos最小化安装,会出现一些命令无法自动补全的情况,例如在docker start 无法自动补全 start 命令,无法自动补全docker容器名字.出现这种情况的可参考以下操作: yum ...

  4. openstack 介绍

    penstack介绍(1)   一.云计算的前世今生 所有的新事物都不是突然冒出来的,都有前世和今生.云计算也是IT技术不断发展的产物. 要理解云计算,需要对IT系统架构的发展过程有所认识. 请看下 ...

  5. 数据库SQL调优的几种方式

    1.创建索引 (1) 要尽量避免全表扫描,首先应考虑在where 及order by涉及的列上建立索引 (2) 在经常需要进行检索的字段上创建索引,一个表中的索引最好不要超过6个 2.避免在索引上使用 ...

  6. python实例文本进度条

    简单的文本进度条代码 解析 引入time库 打印一行作为开始 最后也打印一个结束的标签 定义变量等于10,文本进度条大概的宽度是10 使用for循环来模拟进度,for i in range()能够不断 ...

  7. Module build failed: TypeError: this.getResolve is not a function at Object.loader 使用vue-cli 创建项目 使用sass时报错 -- 等其他sass 报错 ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib

    已经安装了 sass相关依赖包 npm  install sass-loader --save-devnpm install node-sass --sava-dev 并且在build文件下webpa ...

  8. API测试-接口测试基础（1）

    由于自己想学习API方面的测试,但是市面上搜不到相关的图书可以系统学习,网上的内容又零零散散,适合有点API开发基础的人去搜索.为了方面新手学习API测试,现在整理了他人的宝贵经验和自己的学习心得,尽 ...

  9. 缓动公式整理（附：C#实现及WPF原版对比）

    前言 缓动在动画效果中应用非常广泛,在合适的时候使用一些缓动效果会使得效果更加符合人的直观感受,简单来说,会显得更加自然. WPF提供了11种缓动效果,涵盖了大部分的使用场景.不过如果需要在非WPF下 ...

  10. Redis5设计与源码分析读后感（二）简单动态字符串SDS

    一.引言 学习之前先了解几个概念: SDS定义:简单动态字符串,Redis的基本数据结构之一,用于储存字符串和整型数据. 二进制安全:C语言中用"\0"表示字符串结束,如果字符串本 ...