使用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 相关文章推荐
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
javascript中Number的方法小结
Nov 21 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
原生js编写2048小游戏
Mar 17 Javascript
js实现幻灯片轮播图
Aug 14 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 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
swfupload 多文件上传实现代码
2008/08/27 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
js模块加载方式浅析
2017/08/12 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python编程入门的一些基本知识
2015/05/13 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
python爬虫 正则表达式解析
2019/09/28 Python
python字符串判断密码强弱
2020/03/18 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
python能做哪些生活有趣的事情
2020/09/09 Python
Python编写万花尺图案实例
2021/01/03 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
小学教学随笔感言
2014/02/26 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
新学期开学演讲稿
2014/05/24 职场文书
车辆工程专业求职信
2014/06/14 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
西柏坡观后感
2015/06/08 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
初中思想品德教学反思
2016/02/24 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python