Canvas绘制饼状图

最新推荐文章于 2024-06-30 23:48:24 发布

No25_Xu

最新推荐文章于 2024-06-30 23:48:24 发布

阅读量171

点赞数

分类专栏： Canvas 文章标签： canvas css3

本文链接：https://blog.csdn.net/No25_Xu/article/details/83513190

版权

Canvas 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		canvas {
			border: 1px solid #ddd;
			margin: 100px;
		}
	</style>
</head>

<body>
	<canvas width="600" height="400"></canvas>
	<script type="text/javascript">
		var pieChart = function(ctx) {
			this.ctx = ctx || document.querySelector("canvas").getContext("2d");
			/*绘制饼图的中心*/
			this.w = this.ctx.canvas.width;
			this.h = this.ctx.canvas.height;
			/*圆心*/
			this.x0 = this.w / 2 + 60;
			this.y0 = this.h / 2;
			/*半径*/
			this.radius = 150;
			/*指向线*/
			this.outLine = 20;
			/*说明矩形框的大小*/
			this.rectW = 30;
			this.rectH = 10;
			this.space = 20;
		}
		pieChart.prototype.init = function(data) {
			this.drawPie(data);
		}
		pieChart.prototype.drawPie = function(data) {
			var that = this;
			/*转化弧度*/
			var angleList = this.transformAngle(data);
			/*绘制饼图*/
			var startAngle = 0;
			angleList.forEach(function(item, i) {
				/*当前结束弧度是下一次的起始弧度*/
				var endAngle = startAngle + item.angle;
				that.ctx.beginPath();
				that.ctx.moveTo(that.x0, that.y0);
				that.ctx.arc(that.x0, that.y0, that.radius, startAngle, endAngle);
				var color = that.ctx.fillStyle = that.getRandomColor();
				that.ctx.fill();
				/*绘制标题*/
				that.drawTitle(startAngle, item.angle, color, item.title);
				/*绘制说明*/
				that.drawDesc(i,item.title);
				startAngle = endAngle;
			})

		}
		pieChart.prototype.getRandomColor = function() {
			var r = Math.floor(Math.random() * 256);
			var g = Math.floor(Math.random() * 256);
			var b = Math.floor(Math.random() * 256);
			return "rgb(" + r + "," + g + "," + b + ")";
		}
		pieChart.prototype.drawTitle = function(startAngle, angle, color, title) {
			/*outX=x0+cos(angle)*(r+outline)*/
			/*outX=y0+sin(angle)*(r+outline)*/
			/*斜边*/
			var edge = this.radius + this.outLine;
			/*x方向直角边*/
			var edgeX = Math.cos(startAngle + angle / 2) * edge;
			/*y方向直角边*/
			var edgeY = Math.sin(startAngle + angle / 2) * edge;
			/*计算出去的坐标*/
			var outX = this.x0 + edgeX;
			var outY = this.y0 + edgeY;

			this.ctx.beginPath();
			this.ctx.moveTo(this.x0, this.y0);
			this.ctx.lineTo(outX, outY);
			this.ctx.strokeStyle = color;
			this.ctx.stroke();

			var textWidth = this.ctx.measureText(title).width;
			if(outX > this.x0) {
				this.ctx.lineTo(outX + textWidth, outY);
				this.ctx.textAlign = "left";
			} else {
				this.ctx.lineTo(outX - textWidth, outY);
				this.ctx.textAlign = "right";
			}
			this.ctx.stroke();
			this.ctx.textBaseline = "bottom";
			this.ctx.font = "16px Microsoft YaHei";
			this.ctx.fillText(title, outX, outY);

		}
		/*说明*/
		pieChart.prototype.drawDesc = function(index,title) {
			/*绘制矩形*/
			this.ctx.fillRect(this.space,this.space+(10+this.rectH)*index,this.rectW,this.rectH);
			/*绘制文字*/
			this.ctx.beginPath();
			this.ctx.textAlign="left";
			this.ctx.textBaseline="middle";
			this.ctx.font = "14px Microsoft YaHei";
			this.ctx.fillText(title,this.space+this.rectW+10,this.space+(12+this.rectH)*index);
		}
		/*弧度*/
		pieChart.prototype.transformAngle = function(data) {
			var total = 0;

			data.forEach(function(item, i) {
				total += item.num;
			});
			/*转化成弧度*/
			data.forEach(function(item, i) {
				var angle = Math.PI * 2 * (item.num / total);
				item.angle = angle;
			});
			return data;
		}
		/*初始化*/
		var data = [{
			title: "壹",
			num: 6
		}, {
			title: "贰",
			num: 30
		}, {
			title: "叁",
			num: 10
		}, {
			title: "肆",
			num: 5
		}];
		var pieChart = new pieChart();
		pieChart.init(data);
	</script>
</body>

No25_Xu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas绘制饼状图

&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; canvas { border: 1px solid #ddd; margin: 100px; } &lt;/style&gt;&
复制链接

扫一扫