以下是一个简单的饼图代码示例:

<!DOCTYPE html>
<html>
<head>
	<title>Pie Chart Example</title>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
	<canvas id="myChart"></canvas>
	<script>
		var ctx = document.getElementById('myChart').getContext('2d');
		var myChart = new Chart(ctx, {
			type: 'pie',
			data: {
				labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
				datasets: [{
					data: [235, 235, 235, 235, 235, 235],
					backgroundColor: [
						'red',
						'blue',
						'yellow',
						'green',
						'purple',
						'orange'
					]
				}]
			}
		});
	</script>
</body>
</html>

这个饼图使用了Chart.js图表库来创建。它定义了一个canvas元素用于呈现图表,并在JavaScript中使用了Chart对象来创建图表。其中,type属性设置为'pie',以指定饼图类型。数据由一个labels数组和一个datasets数组组成,其中datasets数组包含一个data数组和一个backgroundColor数组,以设置各数据的大小和颜色。在本例中,每个数据大小都设置为235,并且使用了6种不同的颜色。


原文地址: http://www.cveoy.top/t/topic/uhX 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录