用canvas画环形图

 var ratios = [['35%','30%','20%','10%','5%'],['20%','10%','35%','5%','30%'],['25%','15%','15%','25%','20%']];
//画出多个环形图
    $('.canvas').each(function(){
        for(var i =0; i<ratios.length;i++){
            draw( $(this), ratios[i]);
        }

    });



function draw(canvas, ratio){
   
    
        var colorArray = ['#4197e7','#e40077','#8ec31f','#e7aa41','#e77c41'];
        var context = canvas.getContext('2d');

        var endDeg, beginDeg = 2;//起始弧度
        for (var i = 0;i<ratio.length;i++){
            context.beginPath();
            endDeg = beginDeg+parseFloat(ratio[i])/100*2*Math.PI;
            context.arc(70,70,55,beginDeg,endDeg);
            beginDeg = endDeg;
            context.lineWidth=20;
            context.strokeStyle = colorArray[i];
            context.stroke();
        }

    
}