首页 前端知识 使用canvas实现动态更新的折线图

使用canvas实现动态更新的折线图

2024-03-05 09:03:03 前端知识 前端哥 475 217 我要收藏

最近正在做一个uniapp项目,其中需要画一个两根折线的折线图,但是要求刷新速度快,差不多2ms要刷新一次数据,折线图也需要及时更新。一开始我使用echarts去做,根本刷新不过来,摁暂停按钮时,也卡的一批,后面我又尝试uchart,chart.js,anychart,但是他们都渲染不过来,抽样也想过,但业务不允许。最后没办法,只能自己用canvas自己写一个。

rendjs

rendjs是一种运行在试图层的js,具体是什么我也不清楚,可以去官网看看。我主要是看重他可以在视图层操作dom,可以提高视图性能。

renderjs | uni-app官网 (dcloud.net.cn)icon-default.png?t=N2N8https://uniapp.dcloud.net.cn/tutorial/renderjs.html

 初始化

            //初始化
			initLine(){
				//主要是为了拿到HTMLCanvasElement 和 CanvasRenderingContext2D用来操作我们的画布
				//之所以这样写,是因为如果直接getElementById,无法拿到它的上下文,也就是说getContext将失效
				const content = document.getElementById('LineChart')
				canvasEle = document.createElement('canvas')
				content.appendChild(canvasEle)
				context = canvasEle.getContext('2d');
				console.log(canvasEle);
				console.log(context);
				
				//设置线宽
				context.lineWidth = 10;
				//将两条初始化的折线画出来
				this.drawLine(pointArr1);
				this.drawLine(pointArr2);
			},

绘画函数

drawLine(pointArr){
				//将画笔的起点移到初始点
				context.moveTo(0,canvasEle.height - pointArr[0]);
				for (var i = 1; i < pointArr.length; i++) {
					//从上一个点连线至目标点
					context.lineTo(50*i,canvasEle.height - pointArr[i]);
					
				}
				//开始画图
				context.stroke();
			}

接口函数

Lineupdate(num){
				// console.log("3")
				//防止server初始化时,context不存在
				if(typeof(context) == "undefined"){
					return ;
				}
				//数组更新数值
				pointArr1.shift();
				pointArr1.push(num[0]);
				pointArr2.shift();
				pointArr2.push(num[1]);
				//更新画布
				canvasEle.height = 200;
				canvasEle.width = 200;
				// console.log("4")
				//画出这更新后的线
				this.drawLine(pointArr1);
				this.drawLine(pointArr2);
			}

完整代码

<template>
	<view>
		<canvas id="LineChart" width="400px" height="400px" :prop="num" :change:prop="LineChart.Lineupdate(num)"></canvas>
	</view>
	
</template>

<script>
	export default {
		data(){
			return {
				num: [50,80]
			}
		},onLoad() {
			this.test();
		},
		methods: {
			test(){
				setInterval(()=>{
					this.$data.num[0] = Math.random()*100;
					this.$data.num[1] = Math.random()*100;
				},2)
			}
		}
	}
</script>

<script module = "LineChart" lang="renderjs">
	let context;
	let canvasEle;
	let pointArr1 = [80,90,100,90,120];
	let pointArr2 = [60,70,120,100,150];
	export default {
		data(){
			return{
				
			}
		},
		mounted(){
			this.initLine();
		},
		methods:{
			//初始化
			initLine(){
				//主要是为了拿到HTMLCanvasElement 和 CanvasRenderingContext2D用来操作我们的画布
				//之所以这样写,是因为如果直接getElementById,无法拿到它的上下文,也就是说getContext将失效
				const content = document.getElementById('LineChart')
				canvasEle = document.createElement('canvas')
				content.appendChild(canvasEle)
				context = canvasEle.getContext('2d');
				console.log(canvasEle);
				console.log(context);
				
				//设置线宽
				context.lineWidth = 10;
				//将两条初始化的折线画出来
				this.drawLine(pointArr1);
				this.drawLine(pointArr2);
			},
			Lineupdate(num){
				if(typeof(context) == "undefined"){
					return ;
				}
				pointArr1.shift();
				pointArr1.push(num[0]);
				pointArr2.shift();
				pointArr2.push(num[1]);
				canvasEle.height = 200;
				canvasEle.width = 200;
				this.drawLine(pointArr1);
				this.drawLine(pointArr2);
			},
			drawLine(pointArr){
				
				//将画笔的起点移到初始点
				context.moveTo(0,canvasEle.height - pointArr[0]);
				for (var i = 1; i < pointArr.length; i++) {
					//从上一个点连线至目标点
					context.lineTo(50*i,canvasEle.height - pointArr[i]);
					
				}
				//开始画图
				context.stroke();
			}
		}
	}
</script>

<style>
</style>

 

 效果真的很好!!

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3274.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!