html 圆饼画布,html5 canvas画饼
2. [文件] lqdpie.html ~ 801B 下载(7)
刘强东吃饼
Your browser does not support the HTML5 canvas tag.
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();
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 = ['
for (var i = 0; i < this.data.length; i++) {
table.push('
');
table.push(this.data[i][0]);
table.push("
");
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("
");
}
table.push("
");
this.container.insertAdjacentHTML("afterEnd", '
');
},
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);
html 圆饼画布,html5 canvas画饼相关推荐
- html5画直线箭头,HTML5 canvas画带箭头的虚线
今天给大家讲解的是在HTML5 canvas画带箭头的虚线.关于Canvas 对象表示一个 HTML 画布元素 -.它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作. 本案例注意事项 ...
- html5垂直线怎么画,HTML5 Canvas画线技巧
正统的HTML5 Canvas中如下代码 复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(3 ...
- html画布直线代码,图文详解如何用html5 canvas画一条直线
是HTML5 中新增的元素,它可以结合JavaScript脚本绘制出各种各样的图形,对于canvas你了解多少?你会用canvas画直线吗?这篇文章就和大家讲讲如何用canvas画一条直线,有一定的参 ...
- HTML5 canvas画圆
今天就给大家演示一下使用canvas画圆 var canvas = document.getElementById("canvas"); canvas.width = 500; c ...
- 毛边效果 html,Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A% ...
- HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js 1 if (window.CanvasRenderi ...
- 毛边效果 html,详解Html5 Canvas画线有毛边解决方法
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
- Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A% ...
- html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图 太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...
最新文章
- android jni研究
- Java多线程之线程虚假唤醒
- Linux下jdk配置环境变量
- 用代码玩剧本杀?第3届83行代码大赛剧情官方解析
- 嵌入式操作系统内核原理和开发(实时系统中的定时器)
- 第1本书:CCIE Practical Studies, Volume I-第13天
- (日常搬砖)之environment.yml的使用
- Apache目录禁止解析
- NodeJS运行时抛出: Error: listen EADDRINUSE :::3000
- 2017年全国大学生电子设计竞赛 单相用电器分析监测装置(K题)
- 校招经历-java开发面试题
- 让QQ群昵称色变的神奇代码
- InputBox函数用法小结
- 自动化测试之邮件发送
- Mybatis 核心知识点整理成图
- 《近匠》专访Ayla Networks云平台工程部主管Sudha Sundaresan——企业级物联网云平台的设计与部署
- vue.js 在微信公众号内实现视频播放
- Dialog和DialogActivity
- 根据经纬度信息画实际地图中的轨迹之百度地图与谷歌地球
- 字符串匹配KMP算法的理解(详细)