使用js画图之饼图
更新时间：2015年01月12日 15:42:57 投稿：hebedich
这篇文章主要介绍了使用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); //累计偏移角度
}
}
}
相关文章
这篇文章主要介绍了微信小程序实现图片滚动效果,结合实例形式分析了微信小程序基于swiper组件的图片滚动效果相关实现技巧与操作注意事项,需要的朋友可以参考下2018-12-12
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
innerhtml用法 innertext用法 以及innerHTML与innertext的区别，看完这个大家以后在实际应用中，就可以选择合适的方法。尽可能的考虑到兼容性。2009-10-10
这篇文章主要介绍了JS批量操作CSS属性。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
当一个页面有多个a标签，实现当前点击a标签变色，其他a标签回复原色，具体实现如下，喜欢的朋友可以参考下2013-11-11
最近整理一下之前做的一个项目，把滚动条动态固定顶部的代码整理出来和大家分享2017-07-07
这篇文章主要为大家详细介绍了微信小程序实现收货地址左滑删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了JavaScript 下载svg图片为png格式,本文通过代码给大家讲解的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
JavaScript与函数式编程解释...2007-04-04![[js高手之路]HTML标签解释成DOM节点的实现方法](//img.jbzj.com/images/xgimg/bcimg8.png)
下面小编就为大家带来一篇[js高手之路]HTML标签解释成DOM节点的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了微信小程序扫描二维码获取信息，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
![[js高手之路]HTML标签解释成DOM节点的实现方法](http://img.jbzj.com/images/xgimg/bcimg8.png)
最新评论