背景介绍
随着考试成绩的实时更新，传统Excel表格的展示方式逐渐被动态HTML/JS技术所替代。本项目旨在实现一个功能强大的考试成绩展示系统，支持动态表格和实时图表，同时具备筛选功能，满足用户对成绩数据的快速查询需求。
思路分析
- 数据预处理：使用pandas库读取Excel文件，将数据结构化为二维数组，方便后续动态展示。
- 动态表格与图表：利用HTML5 Canvas绘制动态表格和图表，结合JavaScript实现动态更新。
- 筛选功能实现：通过按钮实现条件筛选，使用变量存储筛选参数，动态过滤数据并更新图表。
- 本地部署：项目需在本地运行，支持基本前端知识，学习文件读写、数据结构与动态内容展示。
代码实现
1. Python代码实现
import pandas as pd
def read_excel_file(file_path):
"""
读取Excel文件并返回数据帧
参数：
file_path: Excel文件路径（需用户上传）
返回：
pandas DataFrame对象
"""
df = pd.read_excel(file_path)
return df
def filter_data(df, subjects, scores):
"""
根据筛选条件过滤数据
参数：
df: 数据表
subjects: 要筛选的科目（字符串）
scores: 分数（数值）
返回：
新增筛选后的DataFrame
"""
filtered_df = df[(df['科目'] == subjects) | (df['分数'] >= scores)]
return filtered_df
def generate_chart(data, subject):
"""
使用HTML5 Canvas绘制动态图表
参数：
data: 数据表
subject: 要展示的科目
"""
canvas = document.getElementById('chart')
ctx = canvas.getContext('2d')
// 生成图表数据，此处使用Canvas绘制示例数据
// 根据数据生成图表
def main():
# 读取Excel文件
excel_df = read_excel_file("C:/data/exam_data.xlsx")
# 筛选数学成绩
filtered_df = filter_data(excel_df, "数学", 90)
// 生成动态图表
generate_chart(filtered_df, "数学")
// 显示结果
display_result(filtered_df)
def display_result(data):
// 显示表格和图表
// 示例：展示表格和动态图表
// 使用HTML和Canvas元素展示数据
2. HTML/JavaScript实现
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<h1>学生考试成绩动态展示</h1>
<!-- 动态表格展示 -->
<table id="table">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>得分</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<!-- 动态图表展示 -->
<canvas id="chart" width="800" height="400"></canvas>
<script>
const table = document.getElementById("table");
const tbody = document.getElementById("tbody");
const chart = document.getElementById("chart");
// 数据读取
const excel_df = read_excel_file("C:/data/exam_data.xlsx");
// 筛选数学成绩
const subjects = "数学";
const scores = 90;
const filtered_df = filter_data(excel_df, subjects, scores);
// 数据展示
function display_result(df) {
tbody.innerHTML = `
<tr>
<td>${df['姓名']}</td>
<td>${df['科目']}</td>
<td>${df['得分']}</td>
</tr>
`;
}
// 动态图表绘制
function generate_chart(data, subject) {
const chartCanvas = document.getElementById("chart");
const ctx = chartCanvas.getContext('2d');
// 示例数据填充
ctx.fillStyle = "#00ff00";
ctx.fillRect(0, 0, 800, 400);
// 填充图表区域
for (const row of data) {
ctx.fillStyle = "#00ff00";
ctx.fillRect(row[0]*10, row[1]*10, 10, 10);
}
}
// 筛选按钮
const filterBtn = document.getElementById("filter-btn");
filterBtn.addEventListener("click", () => {
display_result(filtered_df);
});
</script>
</body>
</html>
3. 总结
本项目通过Python实现Excel文件读取和动态数据展示，结合HTML/JavaScript实现筛选功能，并使用Canvas绘制图表。项目支持本地运行，可学习文件读写、数据结构与动态内容展示等基础前端知识。通过上述实现，用户能够实时查看考试成绩，并支持灵活的筛选操作，提升了数据处理的灵活性和效率。