使用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 相关文章推荐
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
微信小程序实现日历签到
Sep 21 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 php_openssl.dll的作用
2013/07/01 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
jquery选择器(常用选择器说明)
2010/09/28 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
判断网页编码的方法python版
2016/08/12 Python
python爬虫之百度API调用方法
2017/06/11 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
python实现人机五子棋
2020/03/25 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
教师评优事迹材料
2014/01/10 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
安全生产计划书
2014/05/04 职场文书
社会实践活动总结范文
2014/07/03 职场文书
汽修专业自荐信
2014/07/07 职场文书
受伤赔偿协议书
2014/09/24 职场文书
大学生逃课检讨书
2015/05/04 职场文书
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang