欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

使用js画图之饼图

时间:2020-11-24 16:58:59|栏目:JavaScript代码|点击:

使用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); //累计偏移角度
        }
    }
}

上一篇:JS实现排行榜文字向上滚动轮播效果

栏    目:JavaScript代码

下一篇:JS+canvas画布实现炫酷的旋转星空效果示例

本文标题:使用js画图之饼图

本文地址:http://www.codeinn.net/misctech/25884.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有