Y]B~4N}L7(}0(LPG1NU_L3.png)
关注迅速公众平台
企业电话：021-64391578
JS+canvas动态绘制饼图的方法示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net canvas饼状图</title>
</head>
<body>
<canvas id="canvas"width="800"height="600"style="border:1px solid red"></canvas>
</body>
<script>
varcolors = (function() {
return("aliceblue,antiquewhite,aqua,aquamarine,azure,beige,bisque,black,blanchedalmond,blue,"+
"blueviolet,brown,burlywood,cadetblue,chartreuse,chocolate,coral,cornflowerblue,cornsilk,"+
"crimson,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,darkgreen,darkgrey,darkkhaki,darkmagenta,"+
"darkolivegreen,darkorange,darkorchid,darkred,darksalmon,darkseagreen,darkslateblue,darkslategray,"+
"darkslategrey,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dimgrey,dodgerblue,firebrick,"+
"floralwhite,forestgreen,fuchsia,gainsboro,ghostwhite,gold,goldenrod,gray,green,greenyellow,grey,"+
"honeydew,hotpink,indianred,indigo,ivory,khaki,lavender,lavenderblush,lawngreen,lemonchiffon,"+
"lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lightgray,lightgreen,lightgrey,lightpink,"+
"lightsalmon,lightseagreen,lightskyblue,lightslategray,lightslategrey,lightsteelblue,lightyellow,"+
"lime,limegreen,linen,magenta,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurple,"+
"mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue,"+
"mintcream,mistyrose,moccasin,navajowhite,navy,oldlace,olive,olivedrab,orange,orangered,orchid,"+
"palegoldenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,peru,pink,plum,powderblue,"+
"purple,rebeccapurple,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,seagreen,seashell,sienna,"+
"silver,skyblue,slateblue,slategray,slategrey,snow,springgreen,steelblue,tan,teal,thistle,transparent,"+
"tomato,turquoise,violet,wheat,white,whitesmoke,yellow,yellowgreen").split(',');
})();
functionBing(obj) {
this.start = 0;
for(varkeyinobj){
this[key] = obj[key];
}
this.init();
}
Bing.prototype = {
init:function() {
this.handle();
this.render(this.data2);
this.drawText();
},
/**
* 渲染页面
* @param obj
* @param i
*/
render:function(obj) {
//3、计算每一个扇形的起始弧度和结束弧度
this.data2.forEach(function(v, i) {
varobj = {};
//第一个扇形的起始弧度：start 结束：start+第一个扇形占据的弧度差
obj.start =this.start;
obj.end =this.start + v.radian;
this.start += v.radian;
//绘制扇形
this.ctx.beginPath();
this.ctx.moveTo(300, 300);
this.ctx.arc(300, 300, 150, obj.start, obj.end);
this.ctx.fillStyle = colors[i * 15];
this.ctx.fill();
},this);
},
/**
* 处理数据
*/
handle:function(){
varsum = 0;
this.data.forEach(function(v) {
sum += v;
});
//2、计算每一个数据所占的比重
this.data2 =this.data.map(function(v) {
varobj = {};
obj.number = v;
obj.ratio = v / sum;//每个数据占据的比重
obj.radian = 2 * Math.PI * v / sum;//该扇形所占据的弧度
obj.start =this.start;
obj.end =this.start + obj.radian;
this.start = obj.end;
returnobj;
},this);
},
drawText:function(){
this.ctx.font ="30px 微软雅黑";
this.ctx.fillStyle ='red';
this.data2.forEach(function(obj){
//计算文字所在的弧度
r2 = obj.start + obj.radian/2;
//就按相对于圆心文字偏移的位置
b =this.r*Math.cos(r2);
h =this.r*Math.sin(r2);
//文字的位置
varx2 =this.x + b;
vary2 =this.y + h;
this.ctx.fillText(obj.number,x2,y2);
},this);
}
};
varcanvas = document.querySelector('canvas');
varctx = canvas.getContext('2d');
vardata = [1, 3, 5, 7, 9];
varbing =newBing({
ctx:ctx,
x:300,
y:300,
r:150,
data:data
});
</script>
</html>
相关推荐
特别申明：本站的主旨在于收集互联网运营相关的干货知识，给运营小伙伴提供便利。 网站所收集到的公开内容均来自于互联网或用户投稿，并不代表本站认同其观点， 也不对网站内容的真实性负责，如有侵权，请联系站长删除
您可以联系我们
彼此协助, 彼此信任
方能将美好的蓝图兑现