{"id":28719944,"url":"https://github.com/t8lionchion/absence-dashboard","last_synced_at":"2026-05-11T07:54:26.397Z","repository":{"id":298120194,"uuid":"998904594","full_name":"t8lionchion/Absence-Dashboard","owner":"t8lionchion","description":"本專案為學生 Ted 製作出缺席視覺化儀表板，透過 phpMyAdmin 匯出 JSON 檔，再使用 Chart.js 以非同步方式載入並繪製圖表。圖表類型包含：  - 出缺席總結圓餅圖 - 每日上課時數折線圖 - 每日在校時數長條圖  使用技術：Chart.js、Bootstrap、async/await、JSON、PHPMyAdmin 資料匯出。","archived":false,"fork":false,"pushed_at":"2025-06-09T13:37:08.000Z","size":5,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-09T14:39:23.064Z","etag":null,"topics":["api","async-await","bootstrap","chart","html","javascript","json"],"latest_commit_sha":null,"homepage":"http://absencedashboard.zapto.org/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/t8lionchion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-09T12:45:03.000Z","updated_at":"2025-06-09T13:42:01.000Z","dependencies_parsed_at":"2025-06-09T14:49:30.208Z","dependency_job_id":null,"html_url":"https://github.com/t8lionchion/Absence-Dashboard","commit_stats":null,"previous_names":["t8lionchion/absence-dashboard"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/t8lionchion/Absence-Dashboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t8lionchion%2FAbsence-Dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t8lionchion%2FAbsence-Dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t8lionchion%2FAbsence-Dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t8lionchion%2FAbsence-Dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/t8lionchion","download_url":"https://codeload.github.com/t8lionchion/Absence-Dashboard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t8lionchion%2FAbsence-Dashboard/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259929972,"owners_count":22933536,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","async-await","bootstrap","chart","html","javascript","json"],"created_at":"2025-06-15T06:06:13.415Z","updated_at":"2026-05-11T07:54:26.335Z","avatar_url":"https://github.com/t8lionchion.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 出缺席圖表（Ted）\n\n本專案說明如何透過 **PHPMyAdmin 匯出 JSON**、搭配 **Chart.js + async/await** 製作三種類型圖表，以動態呈現學生 Ted 的出缺席情況。\n\n---\n\n### 📊 1-7. 出席狀況圓餅圖\n\n**📌 對應 SQL 語法：**\n\n```sql\nSELECT\n  SUM(class_hours) AS `總課程時數`,\n  SUM(attended_hours) AS `實際上課時數`,\n  SUM(absent_hours) AS `缺席時數`,\n  SUM(late_hours) AS `遲到時間`,\n  SUM(leave_early_hours) AS `早退時數`,\n  SUM(attended_hours) / SUM(class_hours) AS `出勤比率`\nFROM attendance_log\nWHERE name = 'Ted';\n```\n建成view:\n```SQL=\nCREATE view attendance_log_view \nas select sum(class_hours) as `總課程時數`,\nsum(attended_hours) as `實際上課時數`,\nsum(absent_hours) as `缺席時數`,\nsum(late_hours) as `遲到時間`,\nsum(leave_early_hours) as `早退時數`,\nsum(attended_hours)/sum(class_hours) as `出勤比率`\nfrom attendance_log \nwhere name='Ted';\n```\n\n**📁 匯出 JSON 檔名：** `attendance_log.json`\n\n**📈 圖表類型：** Pie / Doughnut Chart\n\n---\n\n### 📈 8. 每日上課時數折線圖\n\n**📌 對應 SQL 語法：**\n\n```sql\nSELECT class_date, attended_hours\nFROM attendance_log\nWHERE name = 'Ted';\n```\n建成view:\n```SQL=\nCREATE view attendance_log2_view \nas select class_date,attended_hours from attendance_log\nwhere name='Ted';\n```\n\n**📁 匯出 JSON 檔名建議：** `attendance_log2.json`\n\n**📈 圖表類型：** Line Chart（折線圖）\n\n---\n\n### 📊 9. 每日在校時數長條圖（或散點圖）\n\n**📌 對應 SQL 語法：**\n\n```sql\nSELECT class_date, raw_hours\nFROM attendance_log\nWHERE name = 'Ted';\n```\n建成view:\n```SQL=\nCREATE view attendclasstime as select class_date,raw_hours from attendance_log\nwhere name='Ted';\n```\n\n**📁 匯出 JSON 檔名建議：** `attendclasstime.json`\n\n**📈 圖表類型：** Bar Chart \n\n---\n\n### 🧩 技術總結：\n\n* 使用 `fetch()` + `async/await` 動態載入 JSON 資料。\n* 使用 `Chart.js` 建立不同類型圖表。\n* 將每個圖表放入 `\u003ccanvas\u003e` 元素中，如：\n\n```html\n\u003ccanvas id=\"ex07\"\u003e\u003c/canvas\u003e\n\u003ccanvas id=\"ex08\"\u003e\u003c/canvas\u003e\n\u003ccanvas id=\"ex09\"\u003e\u003c/canvas\u003e\n```\n\n* 搭配 `Bootstrap` 佈局美化畫面。\n\n---\n\n### 📦 專案結構：\n\n```bash\nattendance-project/\n├── 6張card對應總課程時數、實際上課時數、缺席時數、遲到時數、早退時數、出勤比率\n├── attendance_log.json      #出缺席 (圓餅圖)\n├── attendance_log2.json     #每日出席時數（折線圖）\n├── attendclasstime.json     #每日在校時數（長條圖 ）\n└── chart-attendance.html    #圖表渲染主頁\n\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft8lionchion%2Fabsence-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ft8lionchion%2Fabsence-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft8lionchion%2Fabsence-dashboard/lists"}