用户年龄20-30岁有5人,30-40岁有4人,40岁及以上有1人,利用html制作这三个年龄段人数的扇形统计图
时间: 2024-05-04 15:16:14 浏览: 38
您好!根据您的要求,我来帮您制作一个利用HTML制作这三个年龄段人数的扇形统计图。具体步骤如下:
Step 1:准备工作
首先,我们需要准备好一个HTML文件,可以使用任意文本编辑器如Notepad++、Sublime Text等。接着,在HTML文件中新增Canvas元素。
```
<!DOCTYPE html>
<html>
<head>
<title>年龄段人数统计图</title>
</head>
<body>
<canvas id="myPieChart" width="500" height="500"></canvas>
</body>
</html>
```
以上代码创建了一个宽度和高度为500像素的画布,用于绘制扇形统计图。
Step 2:绘制扇形统计图
在HTML文件中,新增一段JavaScript代码,用于绘制扇形统计图。具体实现方式如下:
```
<script>
var canvas = document.getElementById("myPieChart");
var context = canvas.getContext("2d");
// 声明三个年龄段的人数
var age_20_30 = 5;
var age_30_40 = 4;
var age_40_above = 1;
// 计算总人数
var total = age_20_30 + age_30_40 + age_40_above;
// 计算扇形的角度和半径
var angle_20_30 = (age_20_30 / total) * Math.PI * 2;
var angle_30_40 = (age_30_40 / total) * Math.PI * 2;
var angle_40_above = (age_40_above / total) * Math.PI * 2;
var radius = canvas.width / 4;
// 绘制扇形
context.beginPath();
context.moveTo(canvas.width / 2, canvas.height / 2);
context.arc(canvas.width / 2, canvas.height / 2, radius, 0, angle_20_30, false);
context.fillStyle = "#FFB6C1";
context.fill();
context.beginPath();
context.moveTo(canvas.width / 2, canvas.height / 2);
context.arc(canvas.width / 2, canvas.height / 2, radius, angle_20_30, angle_20_30 + angle_30_40, false);
context.fillStyle = "#ADD8E6";
context.fill();
context.beginPath();
context.moveTo(canvas.width / 2, canvas.height / 2);
context.arc(canvas.width / 2, canvas.height / 2, radius, angle_20_30 + angle_30_40, angle_20_30 + angle_30_40 + angle_40_above, false);
context.fillStyle = "#98FB98";
context.fill();
// 绘制统计图例
var offset = radius + 50;
context.fillRect(canvas.width - offset + 10, 25, 15, 15);
context.fillText("20-30岁:" + age_20_30 + "人", canvas.width - offset + 30, 35);
context.fillRect(canvas.width - offset + 10, 55, 15, 15);
context.fillText("30-40岁:" + age_30_40 + "人", canvas.width - offset + 30, 65);
context.fillRect(canvas.width - offset + 10, 85, 15, 15);
context.fillText("40岁及以上:" + age_40_above + "人", canvas.width - offset + 30, 95);
</script>
```
以上代码中,我们首先获取了Canvas画布和Context对象,然后计算了三个年龄段的人数,和扇形的角度和半径。接着,使用Canvas API的相关方法,绘制了三个扇形和统计图例。最终,我们得到了一个年龄段人数统计的扇形图。
以上是这个问题的解决方案,希望能够帮到您。如果您还有其他问题,欢迎随时问我哦!
阅读全文