使用js画图之饼图

271 阅读 0 评论 179 点赞

我是靠谱客的博主美满往事，最近开发中收集的这篇文章主要介绍使用js画图之饼图，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

使用js画图之饼图

饼图是将一个圆分割为多个扇形。

样例：http://www.zhaojz.com.cn/demo/draw8.html

复制代码代码如下:

//饼图

//dot 圆点

//r 半径

//data 数据（一维数组）

function drawPie(dot, r, data){

    if(data && data.length > 0){

        var accumulationAngleOfSlope = new Number(0); //累计偏移角度

        var total = new Number(0);

        var i = 0;

        for(;i<data.length;i++){ //计算data的合计

            total += data[i];

        }

        for(i = 0;i<data.length;i++){

            var angle = new Number(360*data[i]/total).toFixed(3); //将data[i]/total转换为角度

            //画一个扇形

            drawSector(dot, r, new Number(angle), new Number(accumulationAngleOfSlope), true, Number(parseFloat(data[i]/total)*100).toFixed(3)+'%');

            accumulationAngleOfSlope = accumulationAngleOfSlope+parseFloat(angle); //累计偏移角度

        }

    }

}