Canvas畫布繪製折線圖
阿新 • • 發佈：2018-12-18
<head> <meta charset="utf-8" /> <title></title> <style type="text/css"> canvas { border: 1px solid #ddd; margin: 100px; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> /*建構函式*/ var LineChart = function(ctx) { /*獲取繪圖工具*/ this.ctx = ctx || document.querySelector("canvas").getContext("2d"); /*畫布的大小*/ this.canvasWidth = this.ctx.canvas.width; this.canvasHeight = this.ctx.canvas.height; /*網格大小*/ this.gridSize = 10; /*座標系間距*/ this.space = 10; /*座標原點*/ this.x0 = this.space; this.y0 = this.canvasHeight - this.space; /*箭頭大小*/ this.arrowSize = 10; /*繪製點*/ this.dottedSize = 6; } /*行為方法*/ LineChart.prototype.init = function(data) { this.drawGrid(); this.drawAxis(); this.drawDotted(data); } /*繪製網格*/ LineChart.prototype.drawGrid = function() { /*x方向的線*/ var xLineTotal = Math.floor(this.canvasHeight / this.gridSize); 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.strokeStyle = "#ddd"; this.ctx.stroke(); } /*y方向的線*/ 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.strokeStyle = "#ddd"; this.ctx.stroke(); } } /*繪製座標系*/ LineChart.prototype.drawAxis = function() { /*x軸*/ this.ctx.beginPath(); this.ctx.strokeStyle = "black"; 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 = "black"; 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) { /*轉換成Canvas座標*/ /*繪製點*/ /*連線*/ var that = this; /*記錄當前座標*/ var prevCanvasX = 0; var prevCanvasY = 0; data.forEach(function(item, i) { /*x=原點座標+資料座標*/ /*y=原點座標-資料座標*/ 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: 100 }, { x: 200, y: 200 }, { x: 300, y: 300 }, { x: 400, y: 200 }, { x: 500, y: 100 }] var LineChart = new LineChart(); LineChart.init(data); </script> </body>