Canvas 实现绘制图表
这里用canvas实现了两个简单的图表，用到了canvas的基本用法，效果如下
新建 chart.js 文件，封装绘制方法
构造方法
function myChart(config){ this.width = config.width > 300 ? config.width : 200 //图表宽度 this.height = config.height > 200 ? config.height : 200 //图表高度 this.el = config.el //容器DOM元素 this.data = config.data //数据 this.title = config.title //title this.type = config.type //类型 line、pie }
初始化方法
init: function(){ this.canvas = document.createElement('canvas') this.canvas.width = this.width this.canvas.height = this.height document.querySelector(this.el).append(this.canvas) this.ctx = this.canvas.getContext('2d') switch(this.type){ case 'line': this.drawLineChart() break; case 'pie': this.drawPieChart() break; default : this.drawLineChart() break; } },
绘制折线图
//绘制折线图 drawLineChart: function(){ var height = this.height this.max = 0 this.min = Infinity this.startPoint = { x: 30, y: height - 15 } //原点位置 this.innerHieght = this.height - 30 - 15 this.innerWidth = this.width - 30 this.findTerminal() this.drawCoordinate() this.drawLine() }, //找到最大值和最小值 findTerminal: function(){ this.data.map((item, index) => { this.max = item.val > this.max ? item.val : this.max this.min = item.val < this.min ? item.val : this.min }) }, //绘制坐标轴 drawCoordinate: function(){ //绘制坐标轴 this.ctx.clearRect(0, 0, this.width, this.height) this.ctx.beginPath() this.ctx.moveTo(this.startPoint.x, this.startPoint.y) this.ctx.lineTo(this.startPoint.x, this.startPoint.y - this.innerHieght) this.ctx.moveTo(this.startPoint.x, this.startPoint.y) this.ctx.lineTo(this.startPoint.x + this.innerWidth, this.startPoint.y) this.ctx.stroke() //绘制横向标尺 var distance = Math.floor(this.innerWidth / this.data.length) this.ctx.beginPath() this.ctx.strokeStyle = "#999" for(let i = 0; i < this.data.length; i++){ let curX = this.startPoint.x + distance*i this.ctx.moveTo(curX , this.startPoint.y) this.ctx.lineTo(curX , this.startPoint.y - 5) this.ctx.moveTo(curX , this.startPoint.y + 15) this.ctx.textAlign = "center" this.ctx.fillText(this.data[i]['key'] , curX , this.startPoint.y + 15 ) } this.ctx.stroke() //绘制横向坐标 var unit = Math.floor((this.max - this.min) / 20) this.ctx.beginPath() this.ctx.strokeStyle = "#999" for(let y = 0; y < 20; y++){ let curY = Math.floor(this.startPoint.y - this.innerHieght / 20 * y) let curVal = Math.floor(this.min + unit*y) this.ctx.moveTo(this.startPoint.x, curY) this.ctx.lineTo(this.startPoint.x + 5, curY) this.ctx.moveTo(this.startPoint.x - 30, curY) this.ctx.fillText(curVal, this.startPoint.x - 15 , curY + 3 ) } this.ctx.stroke() //绘制title this.ctx.beginPath() this.ctx.font = "20px Arial" this.ctx.fillText(this.title, this.width / 2 - 30 , 20) this.ctx.stroke() }, //绘制折线 drawLine: function(){ var distance = Math.floor(this.innerWidth / this.data.length) this.ctx.beginPath() this.ctx.moveTo(this.startPoint.x, this.startPoint.y) for(let i = 0; i < this.data.length; i++){ let curY = this.startPoint.y - (((this.data[i].val - this.min)/(this.max - this.min)) * this.innerHieght) this.ctx.lineTo(this.startPoint.x + i*distance, curY) this.ctx.strokeStyle = "#000" this.ctx.font = "10px Arial" this.ctx.fillText(Math.floor(this.data[i].val), this.startPoint.x + i*distance, curY + 10 ) this.ctx.stroke() this.ctx.beginPath() this.ctx.fillStyle="gray" this.ctx.arc(this.startPoint.x + i*distance, curY,3,0,2*Math.PI); this.ctx.fill() this.ctx.beginPath() this.ctx.moveTo(this.startPoint.x + i*distance, curY) } }
绘制饼状图
//绘制饼状图 drawPieChart: function(){ var shortAxis = this.width < this.height ? this.width : this.height this.radius = 0.4 * shortAxis var width = this.width var height = this.height this.centerPoint = { x: width/2, y: height/2 + 20} this.drawPieLegend() this.calcPercentage() this.drawPie() }, //计算饼状图比例 calcPercentage: function(){ var total = 0 this.data.map((item,index) => { total += item.val }) this.data.map((item,index) => { item.proportion = Math.floor(item.val / total * 100000) / 100000 }) }, //绘制饼状图内容 drawPie: function(){ var offset = 0 for(let i = 0; i < this.data.length; i++){ this.ctx.beginPath() this.ctx.moveTo(this.centerPoint.x, this.centerPoint.y) this.ctx.arc(this.centerPoint.x, this.centerPoint.y, this.radius, 2*Math.PI*offset, 2*Math.PI*(this.data[i].proportion + offset)) this.ctx.closePath() this.ctx.fillStyle = this.data[i].bg this.ctx.fill() this.ctx.beginPath() let x = this.centerPoint.x + Math.cos(2*Math.PI*(this.data[i].proportion/2 + offset))*this.radius let y = this.centerPoint.y + Math.sin(2*Math.PI*(this.data[i].proportion/2 + offset))*this.radius this.ctx.moveTo(x, y) let x1 = this.centerPoint.x + Math.cos(2*Math.PI*(this.data[i].proportion/2 + offset))*(this.radius + 50) let y1 = this.centerPoint.y + Math.sin(2*Math.PI*(this.data[i].proportion/2 + offset))*(this.radius + 50) this.ctx.lineTo(x1, y1) this.ctx.stroke() this.ctx.fillText(this.data[i].proportion + '%', x1 - 10, y1) offset += this.data[i].proportion } }, //绘制饼状图图例 drawPieLegend: function(){ for(let i = 0; i < this.data.length; i++){ let color = '#'+Math.floor(Math.random()*0xffffff).toString(16) this.data[i].bg = color this.ctx.fillStyle = color this.ctx.fillRect(this.width - 100, 30 * i + 50, 40, 20) this.ctx.fillText(this.data[i].key, this.width - 50 , 30 * i + 65) } },
使用：
引入 chart.js 文件
<script type="text/javascript" src="chart.js"></script>
var chart = new myChart({ width: document.body.clientWidth, height: 500, el: '#app', data: arr, title: `${data.name}(${data.symbol})`, type: 'line' }) chart.init()
