今天主要幫記帳 App 加入分類圓餅圖和多條件搜尋功能。前幾天主要是在處理資料和功能，這次則開始思考「要怎麼讓使用者更容易看懂這些資料」。
用 Canvas 做出圓餅圖
我想讓使用者可以直接看到每個分類的收支比例，所以加入了圓餅圖。
原本我不知道不用第三方套件要怎麼製作圖表，因此請 Gemini 教我該怎麼使用 HTML5 的方式。
我問 Gemini：
「如果不使用 Chart.js 之類的套件，要怎麼用 Canvas 做出記帳分類的圓餅圖？」
而它提供了使用 arc() 搭配角度計算來繪製圓餅圖的方法。我才知道「所有 HTML元素（包含 Canvas畫布）在預設情況下，通通都是「長方形」或「正方形」的。」所以想讓畫布看起來像圓形，要用下面那段程式:

下面是圓餅圖的主要程式碼:

先整理資料再畫圖
原本的記帳資料是一筆一筆的紀錄，但圓餅圖需要的是「每個分類的總金額」。
所以我使用之前學過的 filter() 和 reduce()，先篩選收入或支出，再將相同分類的金額加總。

做功能時不一定是直接把資料拿來使用，有時候需要先整理成適合該功能的資料格式。
加入多條件搜尋
除了圓餅圖之外，這次也加入了搜尋功能。
使用者可以搜尋日期、名稱或分類，例如 08-25、麥當勞 或 餐飲。
我請 Gemini 幫我把原本的篩選功能和搜尋條件整合在一起：

這裡也再次用到了 && 和 ||，讓不同的篩選條件可以一起運作。
搜尋框加入一鍵清除
最後讓搜尋框在有輸入文字時顯示 ✕ 按鈕，方便使用者快速清除搜尋內容。

同樣，今天我也請AI題目讓我更加穩固今天的概念

這邊附上修改後的成果:

今天的 Vibe Coding
今天我改成下面流程呈現，讓文章更好閱讀
不知道怎麼做 → 問 AI → 看懂 AI 的做法 → 實際放進 App → 根據結果修改。
總結:
今天完成了圓餅圖、多條件搜尋和搜尋清除功能。除了學到 Canvas 的基本使用方式，也再次練習 filter()、reduce() 和條件判斷。