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

很多时候跟着书和不系统的视频学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。

学习要有一个清晰的职业学习规划，学习过程中会遇到很多问题，你可以到我们的web学习交流君羊-点击此处，

同时准备了基础，进阶学习资料。学友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时讲一些项目实战案例。

数学表达式calc()是CSS中的函数，主要用于数学运算。使用calc()为页面元素布局提供了便利和新的思路。相关视频教程推荐：

本篇文章给大家带来的内容是关于canvas绘制饼图的方法介绍(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一. 任务说明

使用原生canvasAPI绘制饼图（南丁格尔玫瑰）。（截图以及数据来自于百度Echarts官方示例库【查看示例链接】)。

二. 重点提示南丁格尔玫瑰图的画法有很多种，Echarts中提供的以半径或面积两种不同模式，本文中以面积比例画法为例，绘制算法如下：确定每个扇区的角度。由于所有扇区的角度加在一起为2π ，我们先按照数据比例来计算角度：

每个扇区面积与总面积之间的比例即为数值的比，将给定参数数组options.radius中的最大和最小数值作为数值最大的一块扇形的绘图数据，代入如下公式即可求得总面积S：

再利用上述公式分别计算出每个扇形对应的外圆半径，在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);

}