饼图是将一个圆分割为多个扇形。

样例: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); //累计偏移角度
}
}
}

JS画几何图形之四【饼图】的更多相关文章

  1. JS画几何图形之三【正弦曲线】

    数学式:y=Asin(ωx+φ)+k 样例:http://www.zhaojz.com.cn/demo/draw7.html 依赖:[点].[直线] JS函数的声明: //画正弦曲线 //dot 原点 ...

  2. JS画几何图形之一【直线】

    JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点 ...

  3. JS画几何图形之六【过直线外一点作垂线】

    样例:http://www.zhaojz.com.cn/demo/draw10.html 依赖:[点].[直线] //过直线外一点画垂线 function drawVerticalLine(point ...

  4. JS画几何图形之五【过圆外一点作切线】

    样例:http://www.zhaojz.com.cn/demo/draw9.html 依赖:[点].[直线].[圆] //画切线 //point 圆外的一点 //dot 圆心 //r 半径 func ...

  5. JS画几何图形之二【圆】

    半径为r的圆上的点p(x,y)与圆心O(x0,y0)的关系: x = x0+rcosA;  y = y0+rsinA ,A为弧度 样例:http://www.zhaojz.com.cn/demo/dr ...

  6. 用JS画斐波那契螺旋线(黄金螺旋线)

    偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩 具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <h ...

  7. js画一棵树

    用纯js画一棵树.思路: 1.一棵树的图片,作为页面背景: 2.通过html5中的canvas画布进行遮罩: 3.定时每隔10ms,从下往上清除1px的遮罩: <!DOCTYPE html> ...

  8. jquery.wordexport.js打印echarts.js画出的柱状图

    jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.worde ...

  9. html+js+highcharts绘制圆饼图表的简单实例

    下面我就为大家带来一篇html+js+highcharts绘制圆饼图表的简单实例.我觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随我过来看看吧 实例如下: 1 2 3 4 5 6 7 8 ...

随机推荐

  1. Android视频编辑SDK--RDVECore来自锐动的无UI,高度抽象化API

    1 RDVECore功能概述 RDVECore是锐动推出的无UI,高度抽象化API的视频编辑SDK,支持以下功能: 1.1 丰富的编辑功能 RDVECore包含了丰富的基础功能,对于编辑中的视频.图片 ...

  2. HITCON-Training-master 部分 Writeup(12月11更新)

    HITCON-Training-master Writeup 0x01.lab3 首先checksec一下,发现连NX保护都没开,结合题目提示ret2sc,确定可以使用shellcode得到权限. I ...

  3. HDU1075-What Are You Talking About

    What Are You Talking About Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 102400/204800 K ...

  4. Batch Normalization

    一.BN 的作用 1.具有快速训练收敛的特性:采用初始很大的学习率,然后学习率的衰减速度也很大 2.具有提高网络泛化能力的特性:不用去理会过拟合中drop out.L2正则项参数的选择问题 3.不需要 ...

  5. python3 三级菜单-基础版

    # -*- coding:utf-8 -*- data = { "北京":{ "东城区":{ "安定门":["国子监", ...

  6. onload和ready的区别

    onload和ready的区别 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行 $(document).read()是DOM结构绘制完毕后就执行,不必等到加 ...

  7. Backbone简单示例

    要的资源: <script type="text/javascript" src="../dep/underscore-1.6.0.min.js"> ...

  8. MyBatis多租户隔离插件开发

    在SASS的大潮流下,相信依然存在很多使用一个数据库为多个租户提供服务的场景,这个情况下一般是多个租户共用同一套表通过sql语句级别来隔离不同租户的资源,比如设置一个租户标识字段,每次查询的时候在后面 ...

  9. Cocos2d-X 精灵、动作效果

    命名空间宏: USING_NS_CC; 感觉事实上挺鸡肋的. NS_CC_BEGIN. == using namespace cocos2d{ NS_CC_END ; } 推断一个精灵被点击: 1.层 ...

  10. bootstarp模板02

    HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="ut ...