第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 2016-2017-2《JAVA程序设计》第十周学习总结
20155336 2016-2017-2<JAVA程序设计>第十周学习总结 学习任务 完成学习资源中相关内容的学习 参考上面的学习总结模板,把学习过程通过博客(随笔)发表,博客标题“学号 ...
- 《图说VR入门》——googleVR 他山之玉
本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/53125482 作者:car ...
- day 1类 对象 属性 方法
1. 解决吃啤酒鸭的问题 第一种方式(面向过程): 1)养鸭子 2)鸭子长成 3)杀 4)作料 5)烹饪 6)吃 7)卒 第二种方式(面向对象): 1)找个卖啤酒鸭的人 2)给钱 交易 3)吃 4)胖 ...
- P3374 【模板】树状数组 1（单点增减，区间求和）
P3374 [模板]树状数组 1 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某一个数加上x 2.求出某区间每一个数的和 输入输出格式 输入格式: 第一行包含两个整数N.M,分别表示 ...
- CI框架浅析（一）
CodeIgniter 是一个小巧但功能强大的 PHP 框架,作为一个简单而“优雅”的工具包,它可以为开发者们建立功能完善的 Web 应用程序.本人使用CI框架有一段时间了,现在决定把 ...
- Ubuntu设置DNS服务
有时候安装完Ubuntu系统,源换好好还是不能更新,软件也不能下, 配置好IP,ping 1.1.1.1是通的,ping 域名就不通了,这是没有DNS解析域名的结果 一.Server版: 对于Ubun ...
- [原创软件]PC端与移动端文件信息互通工具
一个不小心,花了几个小时,就做出来了一个专利,这不科学啊... 软件主要功能: 跨平台(已适配Mac.Windows)远程连接手机端和PC端 远程执行shell命令 远程和本地文件实现互通传输共享 显 ...
- Python接口测试实战2 - 使用Python发送请求
如有任何学习问题,可以添加作者微信:lockingfree 课程目录 Python接口测试实战1(上)- 接口测试理论 Python接口测试实战1(下)- 接口测试工具的使用 Python接口测试实战 ...
- idea下增加scala
1 idea工具下,下载scala插件 2 idea下新建scala工程 File——New——module 如果按照上图,设置后点击下载,出现下图下载过慢情况下, 这里我选择了等待,大概等了半小时才 ...
- 001 -js对时间日期的排序
001-JS对时间日期的排序 最近在做公司的项目时间,产品给了一个很简单的页面,让帮忙写一下.首先看一下产品的需求: 需要对该列表进行排序 思路:(1)可以在数据库写sql语句的时间直接一个DESC按 ...