只要在每一行輸入類別與金額,格式為「標籤,數值」,就能為你的預算製作圓餅圖,瀏覽器會即時重新繪製圖表,每個扇形都會依比例上色、調整大小,並標示原始數值與百分比。這個格式刻意設計得很寬容:你可以直接貼上從試算表複製的數字、保留空行,或讓類別名稱本身包含逗號,圖表照樣能建立。每個百分比都會根據你輸入的數值自動計算,所以即使你對數學沒把握,所有扇形加起來永遠等於整體。產出是一張乾淨、色彩標記清楚的 PNG 圖片,可以直接放進簡報、報告、試算表或訊息中,不需額外清理。一旦類別與金額都準備好,整個過程非常快速,你在瀏覽器中看到的圖表,就是存成 PNG 的那一張。
大多數想做預算圓餅圖的人,都在試圖回答一個簡單的問題:錢實際上花到哪裡去了?當你的類別——房租、餐費、交通、儲蓄——都能以單一總額的比例來表示時,圓餅圖就是最快的視覺答案,因為眼睛一眼就能讀出大小關係。這個工具正是為了這個情境而生:不是給設計師,也不是給資料分析師,而是給那個想把一欄數字變成一張可分享圖片的日常需求。
為什麼圓餅圖適合用於預算
圓餅圖是一種「整體與部分」的圖形,這也正是每月預算給人的感覺。你有一份薪水或一筆總金額,想看每個用途佔了多少。當這樣的心智模型成立時,圓餅圖就能幫你完成工作:沒有座標軸要讀、沒有刻度要解讀、也不需要拿第二個數字來比較。讀者唯一要做的事,就是看哪一塊扇形最大。
預算天生也是「部分佔整體」的關係。如果你的類別確實加總成一份完整的支出計畫,圓餅圖就能在視覺上傳達那份「完整性」。如果你本來需要一長串比較,或寫一句「我們把 40% 花在住房、20% 花在食物」,同一個概念只需要一個圓就能呈現。類別名稱與扇形大小會說明一切,這也是這種格式在個人理財文章、家庭預算範本和小型企業報告中如此常見的原因。
話雖如此,圓餅圖並非每種預算情境的最佳答案。當扇形太多、類別並非單一整體的一部分,或預算會隨時間變動時,圓餅圖就會失效。本文稍後會回到這些情境,幫你為不同的工作選擇合適的圖表。
圓餅圖製作工具能做什麼
圓餅圖製作工具是一個小巧、瀏覽器式的產生器,能把一串純文字的標籤與數字,變成一張完成的圓餅圖與可下載的 PNG。它運作方式的關鍵事實:圖表是在你自己的瀏覽器分頁中,以 HTML 畫布繪製,僅使用你輸入的文字,而 PNG 是在你的裝置上本機產生。不會上傳任何資料,所以私密的財務數字能保持私密。
你不需要安裝任何東西、不用註冊、也不用等伺服器。打開頁面、開始輸入,圖表就會隨著輸入即時重繪。每個扇形都會從內建的調色盤中取得顏色,依佔比調整大小,並列在圖例中,顯示標籤、原始數值與百分比。你只需要輸入原始數字;工具會自動計算百分比並據此設定每個扇形的大小。輸出是一張白底的 PNG,可直接放進文件、簡報或對話中。
3 步驟建立預算圓餅圖
- 輸入你的預算資料,每行一筆,格式為「標籤, 數值」。像 Rent, 1200 這一行會產生一個標記為「Rent」、數值為 1200 的扇形。再加一行 Food, 500 就會多一個扇形。空行會被忽略,標籤與數字周圍的多餘空白也會被自動刪除,所以你可以直接從試算表貼上粗略的欄位,不用先整理。
- 觀察圓餅圖即時重繪。每個扇形顏色都不同,並加入側邊的圖例,顯示標籤、原始數值與佔總額的百分比。你可以新增或刪除行、調整數字;每次按下按鍵,圖表都會更新。如果某一行沒有有效的數字,該行會被略過,而不會讓圖表壞掉。
- 可選擇性地加入圖表標題,為整體命名——例如「April Budget」或「Q3 Spending」。當圖表看起來正確時,點擊下載,就能存成 PNG。圖片保留白底與銳利的扇形邊緣,所以可以直接乾淨地放進簡報、文件或聊天訊息中。
附上算式的實際範例
假設你的每月預算分成四行:Rent = 1200、Food = 500、Transport = 300、Other = 1000。總額是 1200 + 500 + 300 + 1000 = 3000。每個扇形的百分比就是該數值除以總和:Rent = 1200 / 3000 = 40%,Food = 500 / 3000 ≈ 16.7%,Transport = 300 / 3000 = 10%,Other = 1000 / 3000 ≈ 33.3%。四個扇形加起來大約是 100%,這就是為什麼圖表看起來是完整的圓,而不是被咬過的甜甜圈。
如果你寧可讓工具處理運算,把同樣四行貼進圓餅圖製作工具,圖例就會自動顯示相同的數字,讓你在下載前先做合理性檢查。
讓預算圓餅圖更清楚的訣竅
扇形少而明確時,圓餅圖最容易被讀懂。把小額的細項——1% 的訂閱、2% 的咖啡預算、3% 的禮物項目——合併成一個「Other」列,讓圓餅保持易讀。從大到小排列你的資料行,看起來會更整齊,因為工具會依照你列出的順序、從頂端開始繪製扇形。標籤盡量保持簡短,讓圖例不會拉得過長,並利用標題說明整體所代表的內容,例如「Household Budget – April」。
有幾個輸入行為值得了解。工具會從一行中的最後一個逗號讀取數值,所以即使類別名稱本身包含逗號——例如 Bills (gas, electric), 180——仍然能正確解析。數值可以是整數或小數,而數值為零也會被接受,只是會形成一個沒有可見寬度的扇形。沒有有效非負數字的行會被直接略過,所以資料上方不小心打的註記不會讓圖表壞掉。
什麼時候長條圖比圓餅圖更合適
當扇形太多、類別不是單一整體的一部分,或你想並排比較兩份預算時,圓餅圖就會失效。在這些情況下,長條圖通常是更好的工具,因為長條能讓每個類別獲得相同的視覺權重,讓眼睛比較長度而不是角度。為此,可以使用長條圖製作工具。
| 情境 | 最佳圖表 | 原因 |
|---|---|---|
| 3–7 個加總等於總額的預算類別 | 圓餅圖 | 一眼就能看出整體與部分的關係 |
| 8 個以上的類別或經排序的細項清單 | 長條圖 | 所有類別獲得相同的視覺權重 |
| 跨好幾個月變動的預算 | 折線圖 | 圓餅圖只能顯示單一時間點的快照 |
| 兩份預算並排比較 | 長條圖 | 直接比較長度,不需要第二個圓 |
一個快速的經驗法則:如果你有 3 到 7 個加總等於總額的類別,就用圓餅圖。如果你有 8 個以上,或是逐月比較,就使用長條圖或折線圖。圓餅圖是單一整體的快照,而不是時間序列,硬把它套進這些用途,只會讓答案埋沒在一堆小到看不見的細片後面。
敏感預算資料的隱私
因為圖表是在你自己的瀏覽器分頁中透過畫布繪製,而 PNG 也是在本機產生,你的數字從不離開你的裝置。對於處理薪資數字、債務餘額或企業預算的人來說,這點值得再強調一次:你不需要信任伺服器,因為伺服器根本沒有參與其中。你可以輸入一份敏感的預算、看著圖表出現、下載 PNG,然後關掉分頁,過程中任何時間點都不會上傳任何資料。
同樣的特性也代表這個工具不需要網路往返就能持續運作,所以你在調整數字時,重繪仍然保持即時。你在瀏覽器中看到的圖表,就是你在 PNG 中得到的圖表——伺服器上不會有第二次渲染,因此可能悄悄改變顏色或扇形角度,你所檢查的就是你所分享的。
輸入格式的快速參考
當你要把不同來源的資料貼進資料框時,一個簡短的表格能節省時間。
| 輸入行 | 工具讀取結果 |
|---|---|
| Rent, 1200 | 標籤:Rent,數值:1200 |
| Groceries , 450 | 刪除空白:標籤:Groceries,數值:450 |
| Bills (gas, electric), 180 | 讀到最後一個逗號:「Bills (gas, electric)」,數值:180 |
| (空白行) | 忽略 |
| Notes for later | 略過——沒有有效數字 |
製作預算圓餅圖最快的方法,就是跳過試算表排版,讓圓餅圖製作工具幫你建立。以「標籤, 數值」的格式輸入類別與金額,加上標明期間的標題,然後下載 PNG。你只要寫一封電子郵件的時間,就能得到一張乾淨、色彩標記清楚、帶有百分比標示的圖表——而且數字從不離開你的瀏覽器。
想深入了解,請參閱從乾淨的 SVG 在 Canva 中製作表格圖表。
想深入了解,請參閱長條圖最佳實務:選擇刻度與標籤。