今天想幫記帳 App 加上一個新的圖表功能，讓使用者可以一眼就能大概看出每天花了多少錢，所以我決定製作每日消費趨勢長條圖。
用 Canvas 做每日消費趨勢圖
這次我直接使用 HTML5 Canvas 自己畫長條圖。
在繪製之前，要先把當月每天的消費金額整理好，再根據金額比例計算每根長條的高度。
例如：

如果某一天的消費越高，長條就會越高，這樣就能很直觀地看出哪些日期花比較多錢。

把整個月份的日期補齊
假設這個月只有 1 號和 5 號有消費，如果直接把這兩筆資料拿去畫圖，中間的日期就會消失。
所以需要先建立當月完整的日期陣列，並將每天的金額預設為 0，再把實際消費資料加總到對應日期。
這樣即使某一天完全沒有消費，圖表上也會保留那一天，只是高度為 0。

原來new Date()還可以這樣算月份天數
在整理日期時，我遇到這段程式碼：

我直接問 AI：
這是什麼意思？如果是二月，他有改用 28 或 29 天來計算嗎？
才知道這利用到 JavaScript Date 的特性。
day 傳入 0 時，會取得指定月份前一個月的最後一天，所以可以利用這個方式取得某個月份的總天數，而且二月也會自動處理平年和閏年。

parseInt()後面的數字代表什麼

我問 AI：
那個 10 是什麼意思？
我一開始以為是前面的數字乘上後面的數字
原來第二個參數 10 是指定使用十進制（Base 10）來解析字串。
例如：

最後會得到數字 3。

現在回頭看會發現自己有些問題看起來還挺稚嫩的，但越是簡單的問題就越應該去了解，這樣想想就不再感到害羞或什麼的了

除此之外我今天同樣麻煩它針對今天新增的功能出題。
我覺得這樣比較能確認自己是真的理解，而不是只是把 AI 給我的程式碼放進 App 裡。

在這邊呈現今天的成果:

總結：
今天完成了當月每日消費趨勢長條圖，學會了：

• 使用 Canvas 的 fillRect()、clearRect()、fillStyle 畫出基本圖表
• 將每日消費資料整理、加總並補齊沒有消費的日期
• 使用 new Date(year, month, 0) 處理月份天數
• 理解 parseInt(string, 10) 中 10 的作用
• 使用 useMemo 快取圖表資料