使用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代码
Dec 26 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
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里的JS打印函数
2006/10/09 PHP
php中目录,文件操作详谈
2007/03/19 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
php curl的深入解析
2013/06/02 PHP
window.opener用法和用途实例介绍
2013/08/19 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
浅析python继承与多重继承
2018/09/13 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
英国香水店:The Perfume Shop
2017/03/27 全球购物
如何安装ruby on rails
2014/02/09 面试题
DELPHI面试题研发笔试试卷
2015/11/08 面试题
前台接待员岗位职责
2014/01/02 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
与美同行演讲稿
2014/09/13 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
上诉答辩状范文
2015/05/22 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
文艺演出主持词
2015/07/01 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书