https://github.com/t8lionchion/absence-dashboard
本專案為學生 Ted 製作出缺席視覺化儀表板，透過 phpMyAdmin 匯出 JSON 檔，再使用 Chart.js 以非同步方式載入並繪製圖表。圖表類型包含： - 出缺席總結圓餅圖 - 每日上課時數折線圖 - 每日在校時數長條圖 使用技術：Chart.js、Bootstrap、async/await、JSON、PHPMyAdmin 資料匯出。
https://github.com/t8lionchion/absence-dashboard
api async-await bootstrap chart html javascript json
Last synced: about 2 months ago
JSON representation
本專案為學生 Ted 製作出缺席視覺化儀表板，透過 phpMyAdmin 匯出 JSON 檔，再使用 Chart.js 以非同步方式載入並繪製圖表。圖表類型包含： - 出缺席總結圓餅圖 - 每日上課時數折線圖 - 每日在校時數長條圖 使用技術：Chart.js、Bootstrap、async/await、JSON、PHPMyAdmin 資料匯出。
- Host: GitHub
- URL: https://github.com/t8lionchion/absence-dashboard
- Owner: t8lionchion
- Created: 2025-06-09T12:45:03.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-09T13:37:08.000Z (about 1 year ago)
- Last Synced: 2025-06-09T14:39:23.064Z (about 1 year ago)
- Topics: api, async-await, bootstrap, chart, html, javascript, json
- Language: HTML
- Homepage: http://absencedashboard.zapto.org/
- Size: 4.88 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 出缺席圖表（Ted）
本專案說明如何透過 **PHPMyAdmin 匯出 JSON**、搭配 **Chart.js + async/await** 製作三種類型圖表，以動態呈現學生 Ted 的出缺席情況。
---
### 📊 1-7. 出席狀況圓餅圖
**📌 對應 SQL 語法：**
```sql
SELECT
SUM(class_hours) AS `總課程時數`,
SUM(attended_hours) AS `實際上課時數`,
SUM(absent_hours) AS `缺席時數`,
SUM(late_hours) AS `遲到時間`,
SUM(leave_early_hours) AS `早退時數`,
SUM(attended_hours) / SUM(class_hours) AS `出勤比率`
FROM attendance_log
WHERE name = 'Ted';
```
建成view:
```SQL=
CREATE view attendance_log_view
as select sum(class_hours) as `總課程時數`,
sum(attended_hours) as `實際上課時數`,
sum(absent_hours) as `缺席時數`,
sum(late_hours) as `遲到時間`,
sum(leave_early_hours) as `早退時數`,
sum(attended_hours)/sum(class_hours) as `出勤比率`
from attendance_log
where name='Ted';
```
**📁 匯出 JSON 檔名：** `attendance_log.json`
**📈 圖表類型：** Pie / Doughnut Chart
---
### 📈 8. 每日上課時數折線圖
**📌 對應 SQL 語法：**
```sql
SELECT class_date, attended_hours
FROM attendance_log
WHERE name = 'Ted';
```
建成view:
```SQL=
CREATE view attendance_log2_view
as select class_date,attended_hours from attendance_log
where name='Ted';
```
**📁 匯出 JSON 檔名建議：** `attendance_log2.json`
**📈 圖表類型：** Line Chart（折線圖）
---
### 📊 9. 每日在校時數長條圖（或散點圖）
**📌 對應 SQL 語法：**
```sql
SELECT class_date, raw_hours
FROM attendance_log
WHERE name = 'Ted';
```
建成view:
```SQL=
CREATE view attendclasstime as select class_date,raw_hours from attendance_log
where name='Ted';
```
**📁 匯出 JSON 檔名建議：** `attendclasstime.json`
**📈 圖表類型：** Bar Chart
---
### 🧩 技術總結：
* 使用 `fetch()` + `async/await` 動態載入 JSON 資料。
* 使用 `Chart.js` 建立不同類型圖表。
* 將每個圖表放入 `` 元素中，如：
```html
```
* 搭配 `Bootstrap` 佈局美化畫面。
---
### 📦 專案結構：
```bash
attendance-project/
├── 6張card對應總課程時數、實際上課時數、缺席時數、遲到時數、早退時數、出勤比率
├── attendance_log.json #出缺席 (圓餅圖)
├── attendance_log2.json #每日出席時數（折線圖）
├── attendclasstime.json #每日在校時數（長條圖 ）
└── chart-attendance.html #圖表渲染主頁
```