使用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 表单的友好用户体现
Jan 07 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 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 魔术函数使用说明
2010/05/14 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
vue filters的使用详解
2018/06/11 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
35个Python编程小技巧
2014/04/01 Python
python字典多条件排序方法实例
2014/06/30 Python
Python中的高级函数map/reduce使用实例
2015/04/13 Python
Python中为什么要用self探讨
2015/04/14 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
计算机网络专业推荐信
2013/11/24 职场文书
公司担保书格式范文
2014/05/12 职场文书
档案工作汇报材料
2014/08/21 职场文书
邀请函的格式
2015/01/30 职场文书
纪律委员竞选稿
2015/11/19 职场文书
CSS极坐标的实例代码
2021/06/03 HTML / CSS
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android