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);}