使用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获取flash加载的百分比的实现代码
May 25 Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
详解Vue This$Store总结
Dec 17 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 Javascript
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解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
javascript 必知必会之closure
2009/09/21 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
servlet面试题
2012/08/20 面试题
培训班开班仪式主持词
2014/03/28 职场文书
超市工作总结范文2014
2014/12/19 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript