使用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 相关文章推荐
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
JS实现电商放大镜效果
Aug 24 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
javascript的setTimeout()使用方法总结
Nov 20 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
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读取数据库信息的几种方法
2008/05/24 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
Python os模块学习笔记
2015/06/21 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
python实现感知器
2017/12/19 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
python实现五子棋小游戏
2020/03/25 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
python操作链表的示例代码
2020/09/27 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
python必学知识之文件操作(建议收藏)
2021/05/30 Python
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技