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); //累计偏移角度
}
}
}
JS画几何图形之四【饼图】的更多相关文章
- JS画几何图形之三【正弦曲线】
数学式:y=Asin(ωx+φ)+k 样例:http://www.zhaojz.com.cn/demo/draw7.html 依赖:[点].[直线] JS函数的声明: //画正弦曲线 //dot 原点 ...
- JS画几何图形之一【直线】
JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点 ...
- JS画几何图形之六【过直线外一点作垂线】
样例:http://www.zhaojz.com.cn/demo/draw10.html 依赖:[点].[直线] //过直线外一点画垂线 function drawVerticalLine(point ...
- JS画几何图形之五【过圆外一点作切线】
样例:http://www.zhaojz.com.cn/demo/draw9.html 依赖:[点].[直线].[圆] //画切线 //point 圆外的一点 //dot 圆心 //r 半径 func ...
- JS画几何图形之二【圆】
半径为r的圆上的点p(x,y)与圆心O(x0,y0)的关系: x = x0+rcosA; y = y0+rsinA ,A为弧度 样例:http://www.zhaojz.com.cn/demo/dr ...
- 用JS画斐波那契螺旋线(黄金螺旋线)
偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩 具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <h ...
- js画一棵树
用纯js画一棵树.思路: 1.一棵树的图片,作为页面背景: 2.通过html5中的canvas画布进行遮罩: 3.定时每隔10ms,从下往上清除1px的遮罩: <!DOCTYPE html> ...
- jquery.wordexport.js打印echarts.js画出的柱状图
jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.worde ...
- html+js+highcharts绘制圆饼图表的简单实例
下面我就为大家带来一篇html+js+highcharts绘制圆饼图表的简单实例.我觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随我过来看看吧 实例如下: 1 2 3 4 5 6 7 8 ...
随机推荐
- Hangfire在ASP.NET CORE中的简单实现
hangfire是执行后台任务的利器,具体请看官网介绍:https://www.hangfire.io/ 新建一个asp.net core mvc 项目 引入nuget包 Hangfire.AspNe ...
- Unity塔防游戏开发
Unity3D塔防开发流程 配置环境及场景搭建编程语言:C#,略懂些许设计模式,如果不了解设计模式,BUG More开发工具:Unity3D编辑器.Visual Studio编译器开发建议:了解Uni ...
- python实战--数据结构二叉树
此文将讲述如何用python实战解决二叉树实验 前面已经讲述了python语言的基本用法,现在让我们实战一下具体明确python的用法 点击我进入python速成笔记 先看一下最终效果图: 首先我们要 ...
- Dubbo源码学习--服务发布(ProxyFactory、Invoker)
上文分析了Dubbo服务发布的整体流程,但服务代理生成的具体细节介绍得还不是很详细.下面将会接着上文继续分析.上文介绍了服务代理生成的切入点,如下: Invoker<?> invoker ...
- Codeforces 890C - Petya and Catacombs 模拟
C. Petya and Catacombstime limit per test1 secondmemory limit per test256 megabytesinputstandard inp ...
- HDU1532 Drainage Ditches SAP+链式前向星
Drainage Ditches Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- PHP 静态缓存
今天来说说PHP页面的静态缓存. 根据个人理解,由于客户端重复的请求某个页面,导致该页面短时间内被重复请求相同的数据,导致给服务端一定的压力,同时用户访问速度也会变慢.此时如果把这个页面缓存起来,客户 ...
- 小白的Python之路 day1 模块初识
模块初识 Python的强大之处在于他有非常丰富和强大的标准库和第三方库,几乎你想实现的任何功能都有相应的Python库支持,以后的课程中会深入讲解常用到的各种库,现在,我们先来象征性的学2个简单的. ...
- 三十天学不会TCP,UDP/IP网络编程-IP头格式祥述
我又来了,这篇文章还是来做(da)推(guang)介(gao)我自己的!俗话说事不过三,我觉得我下次得换个说法了,不然估计要被厌恶了,但是我是好心呐,一定要相信我纯洁的眼神.由于这两年接触到了比较多的 ...
- 《算法》C/C++ 图形处理
概述 一般图形输出无法就是用循环输出 ,提前构造好图形. 两种方式 ** 模拟法直接输出** ** 二维数组 构造输出** 问题描述 利用字母可以组成一些美丽的图形,下面给出了一个例子: ABCDEF ...