使用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中的事件
Sep 23 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
Web应用开发TypeScript使用详解
May 25 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中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
php实现读取超大文件的方法
2014/07/28 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
python分割和拼接字符串
2013/11/01 Python
老生常谈python中的重载
2018/11/11 Python
用python实现刷点击率的示例代码
2019/02/21 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
django之自定义软删除Model的方法
2019/08/14 Python
python实现局域网内实时通信代码
2019/12/22 Python
基于Python实现简单学生管理系统
2020/07/24 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
软件工程师面试题
2012/06/25 面试题
马云的职业生涯规划之路
2014/01/01 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
大学班干部竞选稿
2015/11/20 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
MySQL GTID复制的具体使用
2022/05/20 MySQL