【日常收支账本】【Day06】设计可视化账本界面——用Dataframe存放各动账记

热心的芝麻

一、项目地址

https://github.com/LinFeng-BingYi/DailyAccountBook
二、新增

1. 完成可视化账本界面设计

1.1 功能详述

可视化账本的需求：

• 一段时间内支出总额、变化趋势、支出结构；
  
• 一段时间内收入总额、变化趋势、收入结构；
  
• 一段时间内净收入总额、变化趋势；
  
• 总资产，分为可用资产和固定资产，忽略非本人名下资产(特指代管存款，如家庭基金)；
  
• 各存款账户的余额，以及各账户在一段时间内收支总额；
  
• 某支出/收入类型在一段时间内的变化趋势、所有记录。
  

界面设计上，分为两个tab页——“总额统计”、“收支结构”。
总额统计tab页中，以数字形式展示支出总额、收入总额、净收入总额、总资产，以表格形式展示各存款账户的余额，以及各账户在一段时间内收支总额，以条形图形式展示支出、收入、净收入的变化趋势。

收支结构tab页中，以饼图形式展示支出结构、收入结构，点击饼图中某收支类型的切片，再弹窗展示该类型在一段时间内的变化趋势、所有记录。（开发中）

1.2 代码实现

通过QDesigner绘制。
2. 自定义QChartView，用于展示收支情况

2.1 功能详述

为便于展示收支趋势，自定义继承于 QChartView 的 StatisticBarChartView 类。
选择继承 QChartView 而不是 QChart 的原因：QChartView 是 QGraphicsView 的子类，可以传入QLayout.addWidget()，方便自定义布局，而 QChart 无法实现。
2.2 代码实现

1. class StatisticBarChartView(QChartView):
2.     def __init__(self, parent=None):
3.         super().__init__()
4.         self.parent = parent
6.         self.chart = QChart()
7.         self.chart.setAnimationOptions(QChart.AnimationOption.SeriesAnimations)
8.         self.setChart(self.chart)
9.         # 坐标轴
10.         self._axisX = None
11.         self._axisY = None
13.         # 存入条形图数据集合set的列表(由于更新条形图所用的QBarSeries.clear()方法会销毁QBarSet对象，故此处通过创建list避免被销毁)
14.         self.bar_set_expense_list = []
15.         self.bar_set_income_list = []
16.         self.bar_set_net_list = []
17.         # 条形图序列series
18.         self.bar_series = QBarSeries()
19.         # x轴时间尺度
20.         self.time_scale_now = "month"
21.         self.time_scale = {"year": "yyyy", "month": "yyyy/MM", "week": "", "day": "MM/dd"}
23.         self.initWidget()
24.         self.bindSignal()

复制代码

代码过长，展开查看剩余代码：

1.     def initWidget(self):
2.         # 标题和标签
3.         self.chart.setTitle("总额统计")
4.         # self.chart.legend().hide()
6.         # 初始化图表
7.         this_year = QDate.currentDate().year()
8.         df_init_expense = pd.DataFrame(
9.             {"date": [datetime.strptime(f"{this_year}{i:0>2}01", "%Y%m%d") for i in range(1, 13)], "value": [1500, 1800] * 6})
10.         df_init_income = pd.DataFrame(
11.             {"date": [datetime.strptime(f"{this_year}{i:0>2}01", "%Y%m%d") for i in range(1, 13)], "value": [6800, 6500] * 6})
12.         df_init_net = pd.DataFrame(
13.             {"date": [datetime.strptime(f"{this_year}{i:0>2}01", "%Y%m%d") for i in range(1, 13)], "value": [5300, 4300] * 6})
14.         self.updateBarSeries(df_init_expense, df_init_income, df_init_net)
15.         # 将series添加到chart中
16.         self.chart.addSeries(self.bar_series)
18.     def bindSignal(self):
19.         self.bar_series.hovered.connect(self.onSeriesHovered)
21.     def onSeriesHovered(self, state, index, bar_set: QBarSet):
22.         """
23.         Describe: 鼠标悬停series事件处理函数
25.         Args:
26.             state: bool
27.                 表示鼠标是否悬停在series上。鼠标悬停时为True，离开后变为False
28.             index: int
29.                 表示鼠标当前所悬停的条形，在条形集合中的编号
30.             bar_set: PySide6.QtCharts.QBarSet
31.                 表示鼠标当前所悬停的条形集合类别
32.         """
33.         # print("悬停series的状态：", state)
34.         if state:
35.             QToolTip.showText(QCursor.pos(), "%s\n%s\n%s" %
36.                               (bar_set.label(),
37.                                self._axisX.categories()[index],
38.                                bar_set.at(index)))
40.     def createStatisticBarChartAxes(self, x_label_list, y_range):
41.         """
42.         Describe: 创建统计条形图坐标轴
44.         Args:
45.             x_label_list: list
46.                 x轴标签列表
47.             y_range: tuple
48.                 y轴范围
49.         """
50.         # 先删除旧坐标轴
51.         self.chart.removeAxis(self._axisX)
52.         self.chart.removeAxis(self._axisY)
53.         # 创建坐标轴
54.         self._axisX = QBarCategoryAxis()
55.         self._axisX.append(x_label_list)
56.         self._axisY = QValueAxis()
57.         self._axisY.setRange(y_range[0], y_range[1])
58.         # 加入坐标轴并绑定
59.         self.chart.addAxis(self._axisX, Qt.AlignmentFlag.AlignBottom)
60.         self.chart.addAxis(self._axisY, Qt.AlignmentFlag.AlignLeft)
61.         # 绑定series到坐标轴
62.         self.bar_series.attachAxis(self._axisX)
63.         self.bar_series.attachAxis(self._axisY)
65.     def updateBarSeries(self, df_expense, df_income, df_net):
66.         """
67.         Describe: 用新数据更新series
69.         Args:
70.             df_expense: pandas.DataFrame
71.                 支出数据
72.             df_income: pandas.DataFrame
73.                 收入数据
74.             df_net: pandas.DataFrame
75.                 净收入数据
76.         """
77.         # 清除series
78.         self.bar_series.clear()
79.         # 创建QBarSet
80.         bar_set_expense = QBarSet("支出", self.chart)
81.         bar_set_expense.append(df_expense['value'].tolist())
82.         bar_set_income = QBarSet("收入", self.chart)
83.         bar_set_income.append(df_income['value'].tolist())
84.         bar_set_net = QBarSet("净收入", self.chart)
85.         bar_set_net.append(df_net['value'].tolist())
86.         # print("条形图净收入的数据：", df_net['value'].tolist())
87.         # 将QBarSet加入series
88.         self.bar_series.append(bar_set_expense)
89.         self.bar_series.append(bar_set_income)
90.         self.bar_series.append(bar_set_net)
92.     def displayAllBarChart(self, df_expense, df_income, df_net):
93.         """
94.         Describe: 展示新条形图
96.         Args:
97.             df_expense: pandas.DataFrame
98.                 支出数据
99.             df_income: pandas.DataFrame
100.                 收入数据
101.             df_net: pandas.DataFrame
102.                 净收入数据
103.         """
104.         self.updateBarSeries(df_expense, df_income, df_net)
106.         # x轴labels
107.         date_str_list = [convertPandasToQDateTime(date).toString(self.time_scale[self.time_scale_now])
108.                          for date in df_net['date']]
109.         # y轴范围
110.         axis_y_range = (min(0, df_net['value'].min()), max(df_expense['value'].max(), df_income['value'].max()))
111.         self.createStatisticBarChartAxes(date_str_list, axis_y_range)
113.     def scalingDfAndDisplay(self, df_expense, df_income, df_net, time_scale):
114.         """
115.         Describe: 根据时间尺度调整数据，并展示结果
117.         Args:
118.             df_expense: pandas.DataFrame
119.                 支出数据
120.             df_income: pandas.DataFrame
121.                 收入数据
122.             df_net: pandas.DataFrame
123.                 净收入数据
124.             time_scale: str['year', 'month', 'day']
125.                 时间尺度
126.         """
127.         if time_scale not in ['year', 'month', 'day']:
128.             print("不支持的时间尺度!!")
129.             raise AttributeError("不支持的时间尺度!!")
130.         # print("传入的时间尺度为：", time_scale)
131.         self.time_scale_now = time_scale
132.         #  如果是天数尺度，直接展示
133.         if time_scale == 'day':
134.             self.displayAllBarChart(df_expense, df_income, df_net)
135.             return
136.         # 根据时间尺度调整数据
137.         # 默认为月尺度
138.         group_by_pattern = '%Y-%m'
139.         if time_scale == 'year':
140.             group_by_pattern = '%Y'
141.         df_expense = scalingDfByTime(df_expense, group_by_pattern)
142.         df_income = scalingDfByTime(df_income, group_by_pattern)
143.         df_net = scalingDfByTime(df_net, group_by_pattern)
144.         # print("根据时间尺度调整后的数据：")
145.         # print(df_expense)
146.         # print(df_net)
147.         self.displayAllBarChart(df_expense, df_income, df_net)

复制代码

三、修改

1. XML文件中存款账户增加信息

1.1 修改内容

XMl文件中，每个存款账户元素节点增加了"ignore"、"disposable"两个子元素：

目的是方便识别、管理。额度类(如会员卡内余额、手机话费余额)、不动产类(如黄金、商品房)将“可支配”设为False，代理存款将“不计入”设为True。
对于额度类存款，用户也可以认为该类账务属于已被消费的资产，一旦充值，便不属于自有资产，此时，该笔充值的动账记录应算作“支出”类别；否则，若用户认为该类账务的充值属于一种资产的转移，其性质仍然属于自有资产，那么该笔充值的动作记录应算作“转移”类别。一切都依据自身认知而定。
四、开发总结

1. Dataframe操作

当需要展示数据时，需要进行各种数据切片(保留某几行/列数据)、按字段值筛选(查看某时间段内数据)、列之间运算(计算净收入)等复杂操作。此时，选择将XML中的记录存储到pandas的DataFrame数据类型中，因为其提供了许多方便的函数可以实现以上需求。
1.1 数据切片

需求描述

现有表示支出的DataFrame对象df_expense，其中有字段"date"、"value"、"category"。当展示支出总额时，只需保留"date"、"value"两个字段，并计算"value"字段值总和。
所用方法

使用DateFrame.iloc[ ]或DateFrame.loc[ ]来实现。
代码实现

用法请参考，简单易懂：Pandas入门-2-loc & iloc

1. df_expense.loc[:, ["date", "value"]]

复制代码

1.2 按字段值筛选

需求描述

现有表示支出的DataFrame对象df_expense，其中有字段"date"、"value"、"category"。此时，需要得到start_date到end_date之间的所有非不动产(category不在ignore_list中)的动账记录数据。
所用方法

loc[ ]方法功能性足够强大，也可以根据多个字段值内容筛选数据，参阅：DataFrame按条件筛选、修改数据：df.loc[]拓展
代码实现

1. df_expense.loc[(df_expense['date'].between(start_date, end_date)) &
2.                (action_df['category'].isin(ignore_category) == False)]

复制代码

1.2 列之间运算

需求描述

现有表示支出的DataFrame对象df_expense、表示收入的DataFrame对象df_income，均含有字段"date"、"value"。此时，需要通过df_income中某日期的收入总额减去df_expense中对应日期的支出总额，以得到表示净收入的DataFrame对象df_net。
⚠ 注意：
在df_expense与df_income中，同一日期可以包含多条记录，因此，需要按日期分组得到每个日的总额。此外，也可能不存在某日期的数据，例如，2023/11/13日，df_expense中有value=10的记录，而df_income中该日没有记录，那么计算时，应先为df_income创建改日的数据，并设置value=0，再执行运算。
所用方法

而我们可以通过groupby()和join()方法，像操作数据库表那样操作DateFrame：对df_expense与df_income按date字段分组，再将分组后的DateFrame按date字段连接，之后再新增value字段，存放计算结果，最后提取出date和value字段，得到最终结果。
代码实现

1. # 按日分组收支记录，得到每日总的收入与支出，以便计算每日净收入
2. df_expense_grouped = df_expense.groupby('date').sum().reset_index()
3. df_income_grouped = df_income.groupby('date').sum().reset_index()
4. # 根据支出Dataframe与收入Dataframe进行join操作，以便得到净收入收入Dataframe
5. df_net = df_expense_grouped.set_index('date').join(df_income_grouped.set_index('date'),
6.                                                    rsuffix='_income', how='outer')
7. # 新增一列df_net.value，其值为df_income.value减去df_expense.value
8. df_net['value'] = df_net['value_income'].sub(df_net['value'], fill_value=0)
9. # 按date字段join后，date则变成了index，此时只需提取value字段
10. df_net = df_net[['value']]
11. # 重命名index为date，并将其从index设为column
12. df_net.index.name = 'date'
13. df_net = df_net.reset_index()

复制代码

2. PySide6界面区域隐藏和显示

通过按钮控制界面某区域隐藏和显示：
[code]    def changeStatisticChartExpand(self):        """        Describe: 控制总额统计tab的图表配置区域是否展开        """        self.flag_expand_config_area = not self.flag_expand_config_area        self.widget_config_panel.setVisible(self.flag_expand_config_area)        if self.flag_expand_config_area:    # 展开            self.pushButton_expand_config_area.setText(">")            self.widget_chart_config.setMinimumWidth(150)            self.pushButton_expand_config_area.setMinimumHeight(30)        else:                               # 隐藏            self.pushButton_expand_config_area.setText("