使用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 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
js实现图片懒加载效果
Jul 17 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
JavaScript实现猜数字游戏
May 20 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中output_buffering
2015/07/13 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
Python的垃圾回收机制详解
2019/08/28 Python
高考考python编程是真的吗
2020/07/20 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
string = null 和string = ''的区别
2013/04/28 面试题
Linux上比较文件的命令都有哪些
2013/09/28 面试题
应届护士推荐信
2013/11/16 职场文书
一名女生的自荐信
2013/12/08 职场文书
三好学生自我鉴定
2013/12/17 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
阿甘正传观后感
2015/06/01 职场文书
浅谈MySQL中的六种日志
2022/03/23 MySQL