canvas绘制饼图的方法介绍(代码)

//绘制饼图
drawPieChart(options);
 
/**
 * 绘制饼图
 * @param {[type]} options [description]
 * @return {[type]} [description]
 */
function drawPieChart(options) {
 //记录最大数值以反求面积总和
 options.maxValue = 0;
 //求数据集总和以在后续计算每个扇形的角度比例
 options.totalNum = options.data.reduce((pre,cur)=>{
 if (cur.value > options.maxValue) {
 options.maxValue = cur.value;
 }
 return pre+cur.value;
 },0);
 /*以最大值对应最大半径来计算面积总和，并覆盖原值
 *使得最大的一块扇形外圆半径为options.radius[0]
 *内圆半径为options.radius[1]
 */
 let Rmin = options.radius[0];
 let Rmax = options.radius[1];
 let r = Math.sqrt((Rmax*Rmax - Rmin*Rmin)*options.totalNum / options.maxValue + Rmin*Rmin);
 options.radius[1] = r;
 //移动坐标系原点至绘图中心
 let paintingCenter={
 x:parseInt(options.center[0],10)/100 * (options.chartZone[2] - options.chartZone[0]) + options.chartZone[0],
 y:parseInt(options.center[1],10)/100 * (options.chartZone[3] - options.chartZone[1]) + options.chartZone[1]
 }
 context.translate(paintingCenter.x, paintingCenter.y);
 //绘制每个扇形,过程中累加旋转角度
 let allAngle = options.data.reduce((prev,cur,index)=>{
 context.fillStyle = options.colorPool[index]
 let angle = calcPaintingData(cur,options);
 return prev + angle;
 },0);
 //绘制中空白色圆
 context.beginPath();
 context.fillStyle = 'white';
 context.arc(0,0,options.radius[0],0,2*Math.PI,false);
 context.fill();
}

/**
 * 计算每个扇形所需要的绘图参数
 */
function calcPaintingData(data,options) {
 let scale = data.value / options.totalNum; 
 let angle = scale * 2 * Math.PI;
 let Rmin = options.radius[0];
 let Rmax = options.radius[1];
 let r = Math.sqrt(scale * (Rmax*Rmax - Rmin*Rmin) + Rmin*Rmin);
 data.r = r;
 //绘制扇形
 paintFan({
 r:r,
 angle:angle,
 data:data,
 options:options
 });
 return angle;//将角度值返回给外层函数以供累加
}

//绘制扇形
function paintFan(opt) {
 context.beginPath();
 context.lineTo(opt.r,0);
 context.arc(0,0,opt.r,0,opt.angle,false);
 context.lineTo(0,0);
 context.closePath();
 context.fill();
 context.rotate(opt.angle);
}