使用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 相关文章推荐
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 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
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
常用python数据类型转换函数总结
2014/03/11 Python
Python greenlet实现原理和使用示例
2014/09/24 Python
简单介绍Python中的JSON使用
2015/04/28 Python
python友情链接检查方法
2015/07/08 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Django web框架使用url path name详解
2019/04/29 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
如何安装ruby on rails
2014/02/09 面试题
竞选村长演讲稿
2014/04/28 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang