预算规划器
追踪每月收入和支出，按类别可视化消费，并将预算导出为CSV。
关于此工具
添加带标签和金额的收入和支出项目。支出按类别标记：住房、餐饮、交通、娱乐或其他。实时汇总显示总收入、总支出和净余额——正值高亮为绿色，负值高亮为红色。SVG饼图按类别直观分解支出。所有数据自动保存到localStorage，预算在访问间持续保留。一键导出为CSV或清除所有数据。
使用方法
- 1 输入标签和金额，然后点击"添加收入"来添加收入项目。
- 2 输入标签、金额并选择类别来添加支出项目。
- 3 查看汇总栏以了解总收入、总支出和净余额。
- 4 查看饼图以获得直观分解，或点击"导出CSV"下载您的数据。
What a budget planner actually does
A budget is a comparison: money coming in against money going out. This planner lets you add named income items (salary, freelance, interest) and named expense items, each tagged with a category. From those lists it computes three headline numbers and a visual breakdown. The arithmetic is deliberately simple — that is the point of a budget — but seeing it laid out and categorised is what turns a vague sense of your finances into a decision you can act on.
The three summary figures are:
- Total income = the sum of every income amount.
- Total expenses = the sum of every expense amount.
- Net balance = total income − total expenses.
A positive net balance is a surplus (you can save or invest it); a negative one is a deficit (you are spending more than you earn). The planner colours the net green when it is at or above zero and red when it falls below, so the health of your month is visible at a glance.
A worked example
Suppose you add one income item, Salary $3,000, and three expenses: Rent $1,200 (Housing), Groceries $400 (Food), and Bus pass $90 (Transport). The planner shows:
| Figure | Calculation | Result |
|---|---|---|
| Total income | 3000 | $3,000.00 |
| Total expenses | 1200 + 400 + 90 | $1,690.00 |
| Net balance | 3000 − 1690 | $1,310.00 (surplus) |
The pie chart then splits the $1,690 of expenses by category: Housing is 1200 ÷ 1690 ≈ 71.0%, Food ≈ 23.7%, and Transport ≈ 5.3%. Each slice's percentage is its category total divided by total expenses, which is exactly how the legend labels them.
Why categories and the pie chart matter
The net balance tells you whether you are overspending; the category breakdown tells you where. Grouping expenses into Housing, Food, Transport, Entertainment, and Other reveals the shape of your spending. A common benchmark many people use is the 50/30/20 guideline — roughly 50% of after-tax income on needs, 30% on wants, 20% on saving and debt repayment. With the pie chart you can sanity-check your own ratios: if Housing alone is eating well over half your income, that is the lever with the most impact.
Your data stays on your device
This planner saves your income and expense lists in your browser's local storage, not on any server. That has two practical consequences. First, your numbers are private — nothing financial is uploaded or transmitted. Second, the data persists in that browser on that device: close the tab and your budget is still there when you return, but it will not appear on a different computer or after clearing site data. Use the Export CSV button to keep a copy you can open in a spreadsheet or move between machines.
Practical tips
- Normalise to one period. Put everything on the same timescale — all monthly, or all weekly. Mixing a monthly salary with a weekly grocery figure makes the net balance meaningless.
- Include irregular costs. Annual bills (insurance, subscriptions) are easy to forget. Divide them by 12 and add the monthly slice so a "good" month does not hide a yearly hit.
- Name items specifically. "Streaming $45" tells you more than "Entertainment $45" when you later look for cuts.
- Export regularly. Because storage is per-browser, export a CSV snapshot if you want a backup or a record across months.
Common mistakes
- Counting gross instead of net income. Budget with take-home pay after tax, not your headline salary, or your surplus is fictional.
- Leaving everything in "Other". An uncategorised pie chart hides the very information that makes the tool useful — assign a real category to each expense.
- Forgetting it is per-device. Clearing browser data or switching computers loses an un-exported budget. Treat the CSV export as your durable copy.