canvas自画图表chart,pieChart

最新推荐文章于 2024-05-15 23:30:20 发布

Cykying

最新推荐文章于 2024-05-15 23:30:20 发布

阅读量1.2k

点赞数

分类专栏： JS HTML CSS

本文链接：https://blog.youkuaiyun.com/u010869754/article/details/51149702

版权

JS 同时被 3 个专栏收录

6 篇文章

订阅专栏

CSS

4 篇文章

订阅专栏

HTML

2 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas API绘制柱状图和饼图。通过设置不同的参数，可以实现图表样式的更改。文章提供了完整的代码示例及注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图，后面是html文件+js文件
<img src="https://img-blog.youkuaiyun.com/20160414104825165?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" height="376" width="241" alt="" />
 利用canvas自绘图表，可以通过更改js里面的参数发表图表样式
<img src="https://img-blog.youkuaiyun.com/20160414104558131?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" height="393" width="248" alt="" />
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!--<link rel="stylesheet" href="css/test.css" />-->
		<title>canvas</title>
	</head>

	<body>
		<p>自画canvas</p>
		<div id="chart"></div>\
		<div id="pieChart"></div>
	</body>
		<script src="js/plugin.js" type="text/javascript" charset="utf-8"></script>
</html>

var plugs=(function(){

		var		config = {
					chartStyle: {
						width: 260,
						height: 200
					},
					origin: {
						x: 5,
						y: 20,
					},
					axisY: {
						marginLeft: 25
					},
					bar: {
						radius: 2.5,
					}
				};

				rateArray = [{
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 60,
					valueL: 100
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}, {
					valueS: 0,
					valueL: 0
				}];

				var canvasP = document.getElementById("chart");
				var canvas = document.createElement("canvas");
				canvas.width = 300;
				canvas.height = 250;
				canvasP.appendChild(canvas);
				var cxt = canvas.getContext('2d');

				cxt.beginPath();
				cxt.moveTo(config.axisY.marginLeft, config.origin.y);
				cxt.lineTo(config.axisY.marginLeft, config.chartStyle.height - 3 + config.origin.y);
				cxt.lineTo(config.chartStyle.width + config.axisY.marginLeft, config.chartStyle.height - 3 + config.origin.y);
				cxt.stroke();
				//横坐标
				for (var i = 0; i < 4; i++) {
					cxt.beginPath();
					cxt.moveTo(i * config.chartStyle.width / 3 + config.axisY.marginLeft, config.chartStyle.height - 3 + config.origin.y);
					cxt.lineTo(i * config.chartStyle.width / 3 + config.axisY.marginLeft, config.chartStyle.height + 2 + config.origin.y);
					switch (i) {
						case (0):
							var time = '00:00';
							break;
						case (1):
							var time = '08:00';
							break;
						case (2):
							var time = '16:00';
							break;
						case (3):
							var time = '24:00';
							break;
					}
					cxt.font = '12px Arial';
					cxt.globalAlpha = 0.5;
					cxt.fillText(time, i * config.chartStyle.width / 3 + config.origin.x, config.chartStyle.height + 15 + config.origin.y);
					cxt.stroke();
				}

				//				纵坐标
				for (var i = 0; i < 6; i++) {
					cxt.beginPath();
					cxt.font = '12px Arial';
					cxt.globalAlpha = 0.5;
					cxt.fillText(30 + 20 * i, 0, (config.chartStyle.height - 3) * (5 - i) / 5 + config.origin.y);
					cxt.stroke();
				}

				//			画柱状图
				for (var i = 0; i < 24; i++) {
					//					柱子
					var jjj = i + 1;
					cxt.fillStyle = "#EFEFEF";
					cxt.globalAlpha = 1;
					cxt.fillRect(jjj * config.chartStyle.width / 24 + config.axisY.marginLeft - config.bar.radius, config.chartStyle.height - 3 - (rateArray[i].valueL - 30) * 1.97 - config.bar.radius + config.origin.y, 2 * config.bar.radius, (rateArray[i].valueL - rateArray[i].valueS) * 1.97);

					//					柱子上圆
					if (rateArray[i].valueL == 0) {
						cxt.globalAlpha = 0;
						cxt.fillStyle = "#FFFFFF";
					} else {
						cxt.fillStyle = "#FD3869";
					}
					cxt.beginPath();
					var j = i + 1;
					cxt.arc(j * config.chartStyle.width / 24 + config.axisY.marginLeft, config.chartStyle.height - 3 - (rateArray[i].valueL - 30) * 1.97 - config.bar.radius + config.origin.y, config.bar.radius, 0, Math.PI * 2, true);
					cxt.closePath();
					cxt.fill();

					//					柱子下圆
					if (rateArray[i].valueL == 0) {
						cxt.globalAlpha = 0;
						cxt.fillStyle = "#FFFFFF";
					} else {
						cxt.fillStyle = "#FDD00A";
					}
					cxt.beginPath();
					var jj = i + 1;
					cxt.arc(jj * config.chartStyle.width / 24 + config.axisY.marginLeft, config.chartStyle.height - 3 - rateArray[i].valueS - config.bar.radius + config.origin.y, config.bar.radius, 0, Math.PI * 2, true);
					cxt.closePath();
					cxt.fill();

				}
				
				

				var canvasP = document.getElementById("pieChart");
				var canvas = document.createElement("canvas");
				canvas.width = 320;
				canvas.height = 150;
				canvasP.appendChild(canvas);
				var cxt = canvas.getContext('2d');

				var data_arr = [0.15, 0.25, 0.6];
				var color_arr = ["#84d0e8", "#3399ff", "#007aff"];
				var text_arr = ["心率正常:60-100bmp", "心率过缓:<60bpm", "心率过速心动过速:>100bmp"];

				var pi2 = Math.PI * 2;
				var c = canvas.getContext("2d");
				c.font = "12px Times New Roman";
				var startAgl = 0;
				var agl;
				for (var i = 0; i < data_arr.length; i++) {
					//绘制饼图
					c.setanti
					agl = data_arr[i] * pi2 + startAgl;
					c.fillStyle = color_arr[i];
					c.beginPath();
					c.lineWidth = 1;
					c.moveTo(80.5, 80.5);
					c.arc(80.5, 80.5, 50, startAgl, agl, false);
					c.lineTo(80.5, 80.5);
					c.fill();
					startAgl = agl;
					//绘制图例
					c.lineWidth = 1;
					c.fillRect(160, 50 + 18 * i, 16, 16);
					c.fillStyle = "#000000";
					c.fillText(text_arr[i], 180.5, 62.5 + 18 * i);
				}

})();

注意事项：在重新绘图的时候一定要关闭之前的路径closePath()，否则新的路径可能会覆盖之前的

注：下一篇canvas模糊问题优化