JavaScript练手小技巧：用Canvas绘制饼图

最近上课讲到了 Canvas，就写了 demo 练练手。

做一个数据饼图。

饼图是数据可视化很重要的一个组成部分。这个案例虽然没有 Echarts 那么好看，但是作为了解Canvas的基础案例，还是很有必要练习下。

 数据 JSON：name为销售品名； money 为销售额； color 为饼图色彩。

let data = [
    {
        name:"水果",
        moneny:11200,
        color:"#229322"
    },
    {
        name:"电器",
        moneny:36277,
        color:"#2562d9"
    },
    {
        name:"数码",
        moneny:87451,
        color:"#25d98b"
    },
    {
        name:"厨具",
        moneny:47854,
        color:"#d925a6"
    },
    {
        name:"服装",
        moneny:117854,
        color:"#d99125"
    },
];

要获取每个数据的占比，首先要获取销售总额。

// 计算总销售额
let totalMoney = 0;
for(let i=0; i<=data.length-1; i++){
    totalMoney += data[i].moneny ;
}

这个案例的核心是利用 canvas 的 arc() 方法绘制扇形。

cx ，cy 圆心坐标； radius 圆的半径；start，end 是弧的起始和终止弧度。

注意：是弧度，不是 360度的度数。

 ctx.arc(cx,cy,radius,start, end );  // 画弧

这个案例的难点是确定起始弧度和结束弧度。

• 每个扇形弧度为 hudu，其值为 2*Math.PI 的基于数据的分割；
• 第一个扇形的start 是 -Math.PI/2；end 为 start+ hudu。
• 后面扇形的 start，就是上一个扇形的 end；end 一直都是 start+hudu

完整代码：