使用js画图之饼图


Posted in Javascript onJanuary 12, 2015

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

        }

    }

}
Javascript 相关文章推荐
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
js中开关变量使用实例
Feb 24 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
javacript使用break内层跳出外层循环分析
Jan 12 #Javascript
使用js画图之正弦曲线
Jan 12 #Javascript
使用js画图之圆、弧、扇形
Jan 12 #Javascript
js函数与php函数的区别实例浅析
Jan 12 #Javascript
使用JS画图之点、线、面
Jan 12 #Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 #Javascript
jQuery实现友好的轮播图片特效
Jan 12 #Javascript
You might like
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
Python3.2中Print函数用法实例详解
2015/05/19 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
Python用for循环实现九九乘法表
2018/05/31 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
python pycharm的安装及其使用
2019/10/11 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
python带参数打包exe及调用方式
2019/12/21 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
医大实习自我鉴定
2013/12/07 职场文书
工作交流会欢迎词
2014/01/12 职场文书
小学生学习感言
2014/03/10 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
2019年工作总结范文
2019/05/21 职场文书
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电
Win11快速关闭所有广告推荐
2022/04/19 数码科技