canvas折线图

画折线图流程

画一个表格画一个坐标系描点连线

效果图

代码完整详解

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) //调用画图方法