html5 canvas画饼
1. [图片] lxdpie.jpg
2. [文件] lqdpie.html ~ 801B 下载(7)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="pie.js"></script>
</head>
<body>
<fieldset style='position:relative;width:500px;height:400px;'>
<legend> 刘强东吃饼</legend>
<canvas id="p" width="500" height="400" >Your browser does not support the HTML5 canvas tag.</canvas>
</fieldset>
<script>
var config = {
id: 'p',
type: '%',
data: [
['刘强东',18.4],['老虎基金',22.1],['HHGL',15.8],['DST',11.2],['BAI',9.5],['Fortune ising',5.3],['Kingdom',5.0],['红杉资本',2.0],
]
};
var p= pie(config);
p.render();
</script>
</body>
</html>
3. [文件] pie.js ~ 3KB
(function() {
var Pie = (function() {
var F = function(conf) {
this.type=null;
this.id=null;
this.total=0;
this.container=null;
this.data=[];
this.init(conf);
return this;
};
F.prototype = {
defaultBgcolor: ['deeppink', 'mediumslateblue', 'chartreuse', 'goldenrod', "#ffff00", "#2F368F", "#F6A25D", "#2CA8E0", "#77D1F6", '#181818', '#45AB35', "#336699", "#5fD1F6"],
init: function(options) {
for (var p in options) {
this[p] = options[p];
}
this.container = document.getElementById(this.id);
},
percentize: function() {
if (this.type && this.type == '%') {
var sum = 0;
for (var i = 0; i < this.data.length; i++) {
sum += this.data[i][1];
if (this.data[i + 1] && (sum + this.data[i + 1][1]) > 100) {
break;
}
}
if (i != this.data.length) {
this.data = this.data.splice(0, i + 1);
}
if (sum != 100) {
this.data.push(['?', Math.ceil(100 - sum), '#282828']);
}
} else {
var sum = 0;
for (var i = 0; i < this.data.length; i++) {
sum += this.data[i][1];
}
if (0 == this.total) {
this.total = sum;
}
if (this.total - sum > 0) {
this.data.push(['?', this.total - sum, '#282828']);
}http://www.enterdesk.com/special/shouhui/
for (var i = 0; i < this.data.length; i++) {
this.data[i][1] = Math.round((this.data[i][1] / this.total) * 100);
}手绘图片
}
},
renderPie: function() {
var x = this.container.clientWidth * .33;
var y = this.container.clientHeight * .5;
var radius = (x > y) ? y : x;
var ctx = this.container.getContext("2d");
var startPoint = 0;
for (var i = 0; i < this.data.length; i++) {
if (null == this.data[i][2]) {
this.data[i][2] = this.defaultBgcolor[i % this.defaultBgcolor.length];
}
ctx.fillStyle = this.data[i][2];
ctx.beginPath();
ctx.moveTo(x, y);
ctx.arc(x, y, radius, startPoint, startPoint + Math.PI * 2 * (this.data[i][1] / 100), false);
ctx.fill();
startPoint += Math.PI * 2 * (this.data[i][1] / 100);
}
return true;
},
renderLabel: function() {
var table = ['<table >'];
for (var i = 0; i < this.data.length; i++) {
table.push('<tr><td bgcolor="');
table.push(this.data[i][2]);
table.push('"> </td><td>');
table.push(this.data[i][0]);
table.push("</td><td align=right>");
if (this.type && this.type == '%') {
table.push(this.data[i][1] + "%");
} else {
table.push(Math.ceil(this.total * this.data[i][1] / 100));
}
table.push("</td></tr>");
}
table.push("</table>");
this.container.insertAdjacentHTML("afterEnd", '<div > ' + table.join("") + '</div>');
},
render: function() {
this.percentize();
this.renderPie();
this.renderLabel();
return true;
}
};
var Pie = function(conf) {
return new F(conf);
},
r;
return Pie;
})();
window.pie = Pie;
})(window);
html5 canvas画饼的更多相关文章
- HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...
- HTML5 Canvas 画钟表
画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...
- CSS3进度条 和 HTML5 Canvas画圆环
看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...
- html5 canvas画不出图像的原因
很久没写博客了,今年过年的时候,家里出了意外,现在心里依然很难受.6月份之前一直忙着写毕业论文,答辩完6月初回公司继续上班,今天刚好周末有空,就写下之前碰到一个问题. 做一个图像查看器(基于Chrom ...
- 基于HTML5 Canvas的饼状图表实现教程
昨天我们分享了一款基于HTML5的线性图表应用,效果非常不错,可以看在线DEMO或者实现教程.今天我们继续来分享一款基于HTML5的网页图表,它也是利用Canvas绘制的,但是和前面不同的是,这款图表 ...
- html5 canvas画流程图
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- HTML5 Canvas画数字时钟
先不说废话,没代码算个蛋. 一些地方注释都写得比较清楚,不过这只是部分,因为只有秒针,但是时针,分针的逻辑都是一致的. 代码中有些坐标不知道为什么较不准,看看就好
- html5 canvas画进度条
这个ie8的兼容是个问题,ie8 的innerHTML有问题啊,添加两个附件吧 <!DOCTYPE html> <html> <head> <meta cha ...
- html5 canvas 画hello ketty
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
随机推荐
- 利用MFC里面格式化函数也可以实现可变长度的问题
直接粘代码: 1: CString str1; //定义两个MFC里面的CString里面的字符串 2: CString str2; 3: str1.Format("(%d)", ...
- iPhone X
iPhone X前置深度摄像头带来了Animoji和face ID,同时也将3D Face Tracking的接口开放给了开发者.有幸去Cupertino苹果总部参加了iPhone X的封闭开发,本文 ...
- AWS上的游戏服务:Lumberyard + Amazon GameLift + Twitch
开发一款世界级的游戏是一个非常困难,耗时和昂贵的过程.如今的游戏玩家要求越来越苛刻,他们希望既能够通过各种不同的终端设备来进行游戏 ,又要求游戏具有社交的功能. 因为此类游戏的开发期和推广期都非常长. ...
- LM339组成的双限比较器
通常是上限电压值与电源电压Vcc接近,下限电压值靠近0V.
- vim diff 的使用
vimdiff 是vim的比较工具可以对两个文件进行差异比较和快速合并 1. 使用vimdiff 比较两个文件 方式一 vimdiff file_left file_right 或者 vim ...
- ios 推送证书没有密钥 解决方案【转载】
注意事项: 1.keychains选择Login 2.2.在创建完CertificateSigningRequest.certSigningRequest可以看到Keys中该有你的私有秘钥 3.按文档 ...
- ios -- 极光推送《1》
昨天公司项目要加入远程推送功能,自己做显然会很麻烦,所以用了极光的远程推送,下面我会讲如何制作推送证书并使用极光推送进行远程推送. 先讲讲怎么下载推送证书吧(前面的很简单要是知道的可以直接往下滑,简书 ...
- python 基础 8.4 re的 spilt() findall() finditer() 方法
#/usr/bin/python #coding=utf-8 #@Time :2017/11/18 18:24 #@Auther :liuzhenchuan #@File :re的spli ...
- python 基础 2.7 range与xrange的区别
#/usr/bin/python #coding=utf-8 #@Time :2017/10/25 19:22 #@Auther :liuzhenchuan #@File :range与xrange的 ...
- Matlab时频图
[b,f,t]=specgram(data,nfft,Fs,window,numoverlap); imagesc(t,f,20*log10(abs(b))), axis xy, colormap(j ...