使用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 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 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模板解析类实例
2015/07/09 PHP
教你php如何实现验证码
2016/01/20 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
jquery 插件开发方法小结
2009/10/23 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
js数据类型检测总结
2018/08/05 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
Python 学习笔记
2008/12/27 Python
写了个监控nginx进程的Python脚本
2012/05/10 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
python 下载文件的几种方法汇总
2021/01/06 Python
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
大学毕业生通用求职信
2013/09/28 职场文书
优秀公益广告词大全
2014/03/19 职场文书
团员个人总结
2015/02/26 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书