📊 BÀI 5: FLASK + BOOTSTRAP + BIỂU ĐỒ (CHART.JS)
Ứng dụng Flask hiển thị thống kê điểm trung bình học sinh
🎯 Mục tiêu bài học
- Kết hợp Flask với Bootstrap để tạo giao diện hiện đại, thân thiện.
- Dùng Chart.js để hiển thị biểu đồ thống kê điểm trung bình.
- Tổng hợp dữ liệu từ SQLite để vẽ biểu đồ.
🧩 1. Cấu trúc thư mục dự án
flask_chart/
├─ app.py
├─ students.db
└─ templates/
├─ index.html
└─ chart.html
⚙️ 2. File app.py
from flask import Flask, render_template
import sqlite3
app = Flask(__name__)
# --- Tạo bảng dữ liệu nếu chưa có ---
def init_db():
conn = sqlite3.connect('students.db')
c = conn.cursor()
c.execute('''CREATE TABLE IF NOT EXISTS students (
id INTEGER PRIMARY KEY AUTOINCREMENT,
hoten TEXT,
lop TEXT,
diem REAL
)''')
conn.commit()
conn.close()
@app.route('/')
def home():
return render_template('index.html')
@app.route('/chart')
def chart():
conn = sqlite3.connect('students.db')
c = conn.cursor()
c.execute("SELECT lop, AVG(diem) FROM students GROUP BY lop")
data = c.fetchall()
conn.close()
# Chuyển dữ liệu thành 2 danh sách: lớp và điểm trung bình
labels = [row[0] for row in data]
values = [round(row[1], 2) for row in data]
return render_template('chart.html', labels=labels, values=values)
if __name__ == '__main__':
init_db()
app.run(debug=True)
💡 Giải thích:
– Lấy dữ liệu điểm trung bình theo từng lớp bằng câu SQL GROUP BY.
– Gửi dữ liệu sang
chart.html để vẽ biểu đồ Chart.js.
📄 3. File templates/index.html – Trang chủ
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Trang chủ - Thống kê học sinh</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container mt-5 text-center">
<h1 class="text-primary">📘 Thống kê học sinh với Flask</h1>
<p>Dự án Flask cuối cùng - THPT Phan Chu Trinh</p>
<a href="/chart" class="btn btn-success mt-3">Xem biểu đồ thống kê điểm TB</a>
</div>
</body>
</html>
📊 4. File templates/chart.html – Hiển thị biểu đồ
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Biểu đồ thống kê điểm trung bình</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="bg-white">
<div class="container mt-5 mb-5">
<h2 class="text-center text-primary">📊 Biểu đồ thống kê điểm trung bình theo lớp</h2>
<canvas id="myChart" height="120"></canvas>
<div class="text-center mt-4">
<a href="/" class="btn btn-outline-secondary">⬅️ Quay lại trang chủ</a>
</div>
</div>
<script>
const ctx = document.getElementById('myChart');
const chart = new Chart(ctx, {
type: 'bar',
data: {
labels: {{ labels|tojson }},
datasets: [{
label: 'Điểm trung bình theo lớp',
data: {{ values|tojson }},
backgroundColor: [
'#3498db','#1abc9c','#9b59b6','#f1c40f','#e67e22','#e74c3c'
]
}]
},
options: {
scales: {
y: {
beginAtZero: true,
max: 10
}
}
}
});
</script>
</body>
</html>
📈 5. Kết quả hiển thị
- Biểu đồ cột hiển thị điểm trung bình của từng lớp.
- Màu sắc tự động thay đổi theo lớp học.
- Dễ dàng mở rộng thành biểu đồ tròn, đường, radar...
🧠 6. Thử thách nâng cao
- Thêm biểu đồ tròn (Pie Chart) thống kê học lực: Giỏi – Khá – Trung bình.
- Kết hợp Bootstrap Card hiển thị tổng số học sinh, điểm cao nhất.
- Thêm filter chọn lớp để xem riêng một lớp.
📚 Kết luận
- Học sinh đã kết hợp được 3 công nghệ: Flask + SQLite + Chart.js.
- Biết cách trình bày giao diện web bằng Bootstrap.
- Đây là nền tảng để phát triển ứng dụng web trực quan và sinh động hơn.
© 2025 Trường THPT Phan Chu Trinh – Gia Lai | Bài giảng Flask – Phần 5: Biểu đồ thống kê (Chart.js)
📌 Danh sách bình luận