第166天：canvas绘制饼状图动画
canvas绘制饼状图动画
1、HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>饼状图面向对象版本</title>
<style>
body {
padding: 0;
margin: 0;
background-color: #f0f0f0;
overflow: hidden;
}
</style>
<script src="bower_components/konva/konva.min.js"></script>
<script src="js/PieChart.js"></script>
</head>
<body>
<div id="container">
</div> <script>
//创建舞台
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,//全屏
height: window.innerHeight
}); //创建层
var layer = new Konva.Layer();
stage.add(layer); //中心点坐标
var cenX = stage.width() / 2;
var cenY = stage.height() / 2; var data = [
{ name: "前端", value: .25, color: '#e0e' },
{ name: "php", value: .2, color: 'orange'},
{ name: "UI", value: .3, color: 'blue' },
{ name: "C++", value: .05, color: 'green' },
{ name: "游戏", value: .1, color: 'purple'},
{ name: "Java", value: .1, color: 'red' }
]; var p = new PieChart({
x: cenX,
y: cenY,
r: 100,
data: data
}); p.addToGroupOrLayer( layer );
layer.draw(); p.playAnimate(); </script>
</body>
</html>
2、PieChart.js
//英 [paɪ] 美 [paɪ]
function PieChart( option ) {
this._init( option );
} PieChart.prototype = {
_init: function( option ) {
this.x = option.x || 0;
this.y = option.y || 0;
this.r = option.r || 0;
this.data = option.data || []; //饼状图所有的 物件的组
this.group = new Konva.Group({
x: this.x,
y: this.y
}); //饼状图：所有的 扇形的组
this.wedgeGroup = new Konva.Group({
x: 0,
y: 0
}); //饼状图： 所有的文字的组
this.textGroup = new Konva.Group({
x: 0,
y: 0
}); this.group.add( this.wedgeGroup );
this.group.add( this.textGroup ); var self = this;
var tempAngel = -90;//从-90开始绘制 this.data.forEach(function(item, index ) {
//把每条数据创建成一个扇形
var angle = 360 * item.value;//当前扇形的角度
//创建一个扇形
var wedge = new Konva.Wedge({
x: 0, //扇形圆心坐标
y: 0,
angle: angle , //扇形的角度
radius: self.r, //扇形的半径
fill: item.color, //扇形的填充颜色
rotation: tempAngel //扇形的旋转角度
}); self.wedgeGroup.add( wedge ); //绘制文本的 角度
var textAngle = tempAngel + 1/2 * angle; //绘制的 百分比的文本
var text = new Konva.Text({
x: (self.r+20) * Math.cos(Math.PI/ 180 * textAngle ),
y: (self.r+20) * Math.sin(Math.PI/ 180 * textAngle ),
text: item.value*100 +'%',
fill: item.color
}); //根据角度判断设置文字的 位置
if( textAngle > 90 && textAngle < 270 ) {
//让文本向左边 移动文字宽度的位置。
text.x( text.x() - text.getWidth() );
} self.textGroup.add( text ); tempAngel += angle;
});
//绘制所有的楔形 //绘制文字 //绘制圆环的线
var cir = new Konva.Circle({
x: 0,
y: 0,
radius: this.r+10,
stroke: '#ccc',
strokeWidth: 2
}); this.group.add( cir ); this._animateIndex = 0;
},
playAnimate: function() { var self = this;
//根据索引显示动画
//把所有扇区 角度设置为0
if( this._animateIndex == 0 ) {
//拿到所有的 扇形
this.wedgeGroup.getChildren().each(function(item, index ){
item.angle(0);
});
} //展示当前索引对应的动画
var item = this.wedgeGroup.getChildren()[this._animateIndex];
item.to({
angle: this.data[this._animateIndex].value * 360,
duration: 2 * this.data[this._animateIndex].value,
onFinish: function() {
self._animateIndex ++;
if( self._animateIndex >= self.data.length) { self._animateIndex = 0;//让他的索引再回到0 //************************重点***********************
return;// 会把整个递归执行完成。
}
//继续执行当前方法，播放下一个动画
self.playAnimate();
}
});
},
//把饼状图添加到层里面的方法
addToGroupOrLayer: function( arg ) {
arg.add( this.group );
}
}
运行效果：
第166天：canvas绘制饼状图动画的更多相关文章
- [canvas]用canvas绘制饼状图
折线图之后又来饼状图啦~\(≧▽≦)/~啦啦啦 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 使用canvas绘制饼状图
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- Canvas(3)---绘制饼状图
Canvas(3)---绘制饼状图 有关canvas之前有写过两篇文章 1.Canvas(1)---概述+简单示例 2.Canvas(2)---绘制折线图 在绘制饼状图之前,我们先要理解什么是圆弧,如 ...
- 用PNChart绘制饼状图简介
写在前面 最近做的小Demo中有一个绘制饼状图的需求.在开始实现之前上网了解了一下现有的一些绘制图形的第三方库,相应的库还是有挺多的,PNChart便是其中一个.PNChart是一个90后的中国boy ...
- canvas动态绘制饼状图，
当我们使用Echrts很Highcharts的时候,总是觉得各种统计图表是多么神奇,今天我就用现代浏览器支持的canvas来绘制饼状统计图,当然仅仅是画出图并没什么难度,但是统计图一般都有输入,根据不 ...
- canvas绘制饼型图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Graphic系统综合练习案例-绘制饼状图
这里用一个案例来将之前学过的关于绘制相关的东东加强巩固一下,纯绘制,木有加点击效果,先来看下最终效果: github中这种百分比饼图的效果非常非常之多,实际在项目中开发当产品有这样类似的需求时做为开发 ...
- IOS之以UIBezierPath绘制饼状图
1.绘制的饼状图是通过多个扇形拼和而成,绘制一个扇形也是比较简单的,核心代码如下: 先画一条圆弧,再画半径,接着再画一条圆弧,最后闭合路径: UIBezierPath* aPath = [[UIBe ...
- [Echarts]用Echarts绘制饼状图
在项目网站的网页中,有这样一幅图: 心血来潮,想使用百度Echarts来绘制一下,可是没能绘制得完全一样,Echarts饼状图的label不能在图形下面放成一行,最后的效果是这样子的: 鼠标移动到it ...
随机推荐
- 20155336 《Java程序设计》实验一（Java开发环境的熟悉）实验报告
20155336 <Java程序设计>实验一(Java开发环境的熟悉)实验报告 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Jav ...
- 优步uber司机常见问题与答案(成都地区官方)
成都地区优步司机常见问题,官方内容,有点多,常出现的问题都收录在这里了,大家可以看看.(注:文章转自官方,非原创) 以下为成都优步合作车主最常见的问题列表和答案.对于绝大多数的车主端问题,您都可以在下 ...
- c++ 全局变量
一.全局变量 声明 全局变量的定义和一般变量定义相同,不同的就是它的位置.一般会放在所有共享函数的前边. 作用 在函数间共享数据. 二.全局变量的运用 三.作业: 写出代码运行结果: ; //0 in ...
- 19、Java并发编程：线程间协作的两种方式：wait、notify、notifyAll和Condition
Java并发编程:线程间协作的两种方式:wait.notify.notifyAll和Condition 在前面我们将了很多关于同步的问题,然而在现实中,需要线程之间的协作.比如说最经典的生产者-消费者 ...
- rpmforge
Could not retrieve mirrorlist http://mirrorlist.repoforge.org/el6/mirrors-rpmforge error was : PYCUR ...
- Python 爬虫之模拟登录
最近应朋友要求,帮忙爬取了小红书创作平台的数据,感觉整个过程很有意思,因此记录一下.在这之前自己没怎么爬过需要账户登录的网站数据,所以刚开始去看小红书的登录认证时一头雾水,等到一步步走下来,最终成功, ...
- commons fileupload上传报错
这个问题困扰我好久了一直没有找到解决方法,先记录下来. 生产环境(简称A)上老是出错,而测试环境(简称B)一切正常. 我们的框架是JAVA语言编写,基于struts1技术总监自己搭的框架,我在stru ...
- JSP整理
JSP全称Java Server Pages,是一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%>结束. JSP是一种Java servlet ...
- oracle数据库之组函数
组函数也叫聚合函数,用来对一组值进行运算,并且可以返回单个值 常见的组函数: (1)count(*),count(列名) 统计行数:找到所有不为 null 的数据来统计行数 (2)avg(列名) ...
- 在进行分布式框架搭建的过程中，出现问题advised by org.springframework.transaction.interceptor.TransactionInterceptor.invoke(org.aopalliance.intercept.MethodInvocation)？
今天在进行宜立方商城,进行文件配置的时间,遇到如下的问题,问题是:advised by org.springframework.transaction.interceptor.TransactionI ...