使用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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
JS版网站风格切换实例代码
Oct 06 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
javascript中关于执行环境的杂谈
2011/08/14 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
python3简单实现微信爬虫
2015/04/09 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
Python自动发邮件脚本
2017/03/31 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
详解python中的 is 操作符
2017/12/26 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
python plotly绘制直方图实例详解
2019/07/22 Python
Django的性能优化实现解析
2019/07/30 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
python的等深分箱实例
2019/11/22 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
建筑工程毕业生自我鉴定
2014/01/14 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
爱心捐助倡议书
2014/05/19 职场文书
技术比武方案
2014/05/19 职场文书
担保贷款承诺书
2015/04/30 职场文书
贫困证明怎么写
2015/06/16 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA