冷冰冰的數字會說話
在前幾天，我完成了 PWA 專案骨架、Firestore 資料庫串接，也成功讓使用者把每天的重量、次數與習慣打卡數據存進雲端。但對使用者來說，看著一堆密密麻麻的數字清單是很枯燥的!所以，今天我要讓數據「視覺化」透過自然語言，請 AI 幫忙整合輕量級的圖表庫 Chart.js，將使用者的習慣達成率與訓練成效，轉化為直覺、好看的動態長條圖（Bar Chart）或熱力圖。
用自然語言召喚 Chart.js 視覺化元件

AI Prompt:

@SCHEMA.md @js/components/chart-bars.js @js/views/habits-view.js
你現在是前端資料視覺化專家。需要為「智慧健身 PWA」實作習慣達成率的動態圖表。
實作要求：
載入 Chart.js： 請在專案中引入 Chart.js（可透過 CDN），並在 @js/components/chart-bars.js 中建立一個可重複使用的長條圖渲染函式 renderHabitChart(canvasId, chartData)。
串接資料結構： 圖表要能讀取 @SCHEMA.md 中 Habits 集合的歷史打卡狀態，自動統計過去 7 天的達成次數。
畫面渲染： 請將這個圖表元件掛載到 @js/views/habits-view.js 中，當使用者切換到習慣頁面時，圖表必須帶有流暢的動畫特效呈現。
深色模式適配： 圖表的座標軸文字、格線顏色必須完美配合我們整體的深色健身房風格 (Dark Mode)。

結果展示:
目前尚未製作出頁面切換的機制，所以還無法看到圖表，在明天我將會製作切換頁面的按鈕，來讓我的程式更完整!