当我们使用Echrts很Highcharts的时候，总是觉得各种统计图表是多么神奇，今天我就用现代浏览器支持的canvas来绘制饼状统计图，当然仅仅是画出图并没什么难度，但是统计图一般都有输入，根据不同的输入来绘制，需要发挥你脑力。
1.canvas简单使用
1.1先看我们的html，需要一个绘图的区域
<canvas id="drawing" width="500px" height="500px"></canvas>
1.2获取绘图区域，并且判断浏览器是否支持canvas绘图
var drawing = document.getElementById('drawing')//获取绘图区域
if(drawing.getContext){
context = drawing.getContext('2d')
}else{
alert（'浏览器不支持canvas'）
}
1.3介绍简单的api（这里的context指的是上面获取的绘图区域）
context.beginPath() 绘图开始，一个图可以分多次绘制，例如饼状图每个小部分都是一次完整的绘制，为了填充不同颜色，都需要多次开始和结束
context.closePath() 本部分绘制结束
context.moveTo(100,100) 抬笔移动到100,100位置，过程中不留下痕迹
context.lineTo(100,100) 从某个起点绘制到100,100这个坐标的，
context.fill() 开始填充，可以先设置填充颜色，context.fillStyle = 'blue';设置填充色，然后在调用context.fill()开始填充本部分
context.stroke() 描边，就是轮廓的颜色，可以先设置颜色，context.strokeStyle="red"，然后调用context.stroke()描边
2.开始我们的封装绘制方法
2.1开始封装绘制方法
/*下列插件传递json的格式{
ele:ele
data:[1,2,3,4]
}*/
function Circle(json) {
this.ele = json.ele;//绘制区域元素
this.data = json.data;//输入的数据
this.step = 0;//绘制的步骤，几个数据，分几次绘制
this.start=0;//其实位置初始化
this.end = 0;//借宿位置初始化
this.init(); //调用初始化方法
}
Circle.prototype.init=function(){
if(this.ele.getContext){ //判断知否支持canvas
this.context = this.ele.getContext('2d')
}else{
console.log('不支持canvas')
}
this.sum() //先统计数据和，以便得到每个数据的占比
this.drawing() //开始绘制
}
Circle.prototype.drawing=function(){
if(this.step >= this.data.length){//超过数据个数，就停止绘制
return
}
this.math()//计算起点和终点
this.context.beginPath();//绘制开始
this.context.fillStyle = Circle.prototype.color();//填充颜色
this.context.moveTo(250,250)//绘制起点移动到的位置，moveTo就像抬笔到某处，过程中不留下痕迹
this.context.arc(250,250,160,this.start,this.end,false)//画圆开始，属性分别是('圆心X轴坐标','原型Y轴坐标','起点','终点',是否逆时针)
this.context.lineTo(250,250)//再绘制直线到圆心，这样形成封闭区域，才可以填充颜色
this.context.fill()//填充颜色
this.context.closePath();//关闭绘图
this.step++;//接着下一步骤的绘制
this.drawing()
}
Circle.prototype.math = function(start,end){//每次绘制是计算起点和终点
this.start=this.end;
this.end = this.start+this.data[this.step]/this.total*2*Math.PI;
}
Circle.prototype.color=function(){//随机颜色的生成
var color="#";
for(var i = 0;i < 6;i++){
color+= parseInt(Math.random()*17).toString(16);
}
return color;
}
Circle.prototype.sum = function(){//得到数据的总和，以便得到每个数据的占比
this.total = this.data.reduce(function(a, b){
return a + b;
});
}
2.2调用方法
var drawing = document.getElementById('drawing')
var img =new Circle({
ele:drawing,
data:[1,2,3,4]
})
2.3查看效果图，（因为我们的填充颜色是随机的，所以每次刷新的饼状图每部分的颜色都会变化）
我的源码地址在https://github.com/jiangzhenfei/canvas/blob/master/circle.html