使用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 相关文章推荐
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
聊聊鉴权那些事(推荐)
Aug 22 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数组
2006/10/09 PHP
DISCUZ 分页代码
2007/01/02 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
使用Python的PEAK来适配协议的教程
2015/04/14 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
python生成随机图形验证码详解
2017/11/08 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
python开发一款翻译工具
2020/10/10 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
通息工程毕业生自荐信
2013/10/16 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
财务部岗位职责范本
2015/04/14 职场文书
小学远程教育工作总结
2015/08/13 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
详解Javascript实践中的命令模式
2021/05/05 Javascript
python unittest单元测试的步骤分析
2021/08/02 Python
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers