这里用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()