• canvas折线图


    画折线图流程

    1. 画一个表格
    2. 画一个坐标系
    3. 描点连线

    效果图

    折线效果图

    代码完整详解

    1. 简单样式style

    			canvas{
    				border:1px solid #ccc
    			}
    

    2. 在body里创建画布

    <canvas width="600" height="400"></canvas>
    

    3. 在js写方法

    var LineChart = function (ctx) {
    	this.ctx = ctx || document.querySelector('canvas').getContext('2d');
    			this.canvasWidth = this.ctx.canvas.width;   //canvas画布宽度
    			this.canvasHeight = this.ctx.canvas.height;  //canvas画布高度
    			this.gridSize = 10;   //表格格子大小
    			this.space = 20;	//距离画布边缘
    			this.x0 = this.space;	//原点x
    			this.y0 = this.canvasHeight-this.space	//原点y
    			this.arrowSize = 10;	//箭头大小
    			this.dottedSize = 6 	//点大小
    		}
    		LineChart.prototype.init = function (data) {
    			this.drawGrid();	//画出表格
    			this.drawAxis();	//画出坐标系
    			this.drawDotted(data);	//描点和连线
    		}
    		LineChart.prototype.drawGrid = function () {
    			var xLineTotal = Math.floor(this.canvasHeight/this.gridSize)
    			this.ctx.strokeStyle = '#eee'; 
    			//画出横向平行线
    			for(var i = 0 ; i <xLineTotal ; i++){
    				this.ctx.beginPath();
    				this.ctx.moveTo(0 , i * this.gridSize - 0.5);
    				this.ctx.lineTo(this.canvasWidth , i * this.gridSize - 0.5)
    				this.ctx.stroke()
    			}
    			//画出纵向平行线
    			var yLineTotal = Math.floor(this.canvasWidth/this.gridSize);
    			for( var i = 0 ; i < yLineTotal ; i ++ ){
    				this.ctx.beginPath();
    				this.ctx.moveTo(i * this.gridSize - 0.5 , 0)
    				this.ctx.lineTo(i * this.gridSize- 0.5 ,this.canvasHeight)
    				this.ctx.stroke()
    			}
    		}
    		LineChart.prototype.drawAxis = function () {
    			this.ctx.beginPath();
    			this.ctx.strokeStyle = '#000';
    			//画出坐标系x轴及箭头
    			this.ctx.moveTo(this.x0,this.y0)
    			this.ctx.lineTo(this.canvasWidth - this.space , this.y0)
    			this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize , this.y0 - this.arrowSize/2);
    			this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize , this.y0 + this.arrowSize/2);
    			this.ctx.lineTo(this.canvasWidth -this.space , this.y0)
    			this.ctx.stroke();
    			this.ctx.fill();
    			//画出坐标系y轴及箭头
    			this.ctx.beginPath()
    			this.ctx.strokeStyle = '#000'
    			this.ctx.moveTo(this.x0,this.y0)
    			this.ctx.lineTo(this.x0 , this.space)
    			this.ctx.lineTo(this.x0 - this.arrowSize / 2 ,  this.space + this.arrowSize)
    			this.ctx.lineTo(this.x0 + this.arrowSize / 2 ,  this.space + this.arrowSize)
    			this.ctx.lineTo(this.x0 ,  this.space)
    			this.ctx.stroke();
    			this.ctx.fill()
    		}
    		LineChart.prototype.drawDotted = function (data) {
    			var that = this;
    			var prevCanvasX = 0 ; //用来记住上一个点
    			var prevCanvasy = 0 ; 
    			data.forEach(function (item,i){
    					var canvasX = that.x0 + item.x;
    					var canvasY = that.y0 - item.y;
    					that.ctx.beginPath();
    					that.ctx.moveTo(canvasX - that.dottedSize / 2 ,canvasY - that.dottedSize / 2);
    					that.ctx.lineTo(canvasX - that.dottedSize / 2 , canvasY + that.dottedSize / 2);
    					that.ctx.lineTo(canvasX + that.dottedSize / 2 ,canvasY + that.dottedSize / 2 );
    					that.ctx.lineTo(canvasX + that.dottedSize / 2 , canvasY - that.dottedSize / 2 );
    					that.ctx.closePath();
    					that.ctx.fill();
    					//需要判断是否有上一个点,否则为原点
    					if(i == 0) {
    						that.ctx.beginPath()
    						that.ctx.moveTo(that.x0 , that.y0)
    						that.ctx.lineTo(canvasX,canvasY)
    						that.ctx.stroke()
    					}else{
    						that.ctx.beginPath()
    						that.ctx.moveTo(prevCanvasX,prevCanvasY)
    						that.ctx.lineTo(canvasX,canvasY)
    						that.ctx.stroke()
    					}
    					prevCanvasX = canvasX
    					prevCanvasY = canvasY
    			})
    			
    		}
    		//初始数据
    		var data = [
    		    {
    		        x: 100,
    		        y: 120
    		    },
    		    {
    		        x: 200,
    		        y: 160
    		    },
    		    {
    		        x: 300,
    		        y: 240
    		    },
    		    {
    		        x: 400,
    		        y: 120
    		    },
    		    {
    		        x: 500,
    		        y: 80
    		    }
    		];
    		
    		var LineChart = new LineChart();
    		LineChart.init(data)   //调用画图方法
    
  • 相关阅读:
    Js时间处理
    Css 显示删除条目效果
    vue权限控制菜单显示的简单实现
    js取对象的属性值循环
    标题的内容响应式设计
    将一个字符串当做一个方法名或对象的key
    JSON序列化和解析
    import 与export详解
    使用flask-mail扩展发送邮件
    正则表达式练习-计算器实现
  • 原文地址:https://www.cnblogs.com/furfur-jiang/p/12238744.html
Copyright © 2020-2023  润新知