跳到主要内容

如何在报表的一个组件中展示两张表的数据?

1. 使用场景

实现应用内两个表单在同一个报表页面进行聚合展示,以达到对比的效果,帮助客户更直观的去查看数据,从而做出准确的业务判断。

2. 操作步骤

本文档对 "项目营收 "(收入)与 " 项目薪资 "(支出)的两个维度的数据,通过以下两个不同的处理方案进行处理后展示。以达到两个维度数据的聚合、对比的目的,为管理人员作出业务判断提供直观的判断辅助。

2.1 方案一:分栏组件与一对多筛选功能结合

使用分栏组件,在左侧展示" 项目人员薪资 ",右侧展示" 项目营收 ",并通过一对多筛选功能实现同时对两个表单数据进行筛选。

一对多筛选功能详情参见 👉报表页面实现一对多筛选

2.1.1 步骤一:表单的创建与配置

(1)项目薪资表的创建与配置

作为" 项目薪资 "数据的来源。

操作步骤:

a、 新建普通表单,命名为:「项目薪资表」;

b、 在表单编辑页面分别添加名为" 年月 "的日期组件,并将右侧 属性-格式 设置为 年-月;

c、 添加名为" 项目名称 "的单行文本组件及名为" 项目薪资 "的数值组件;

d、 点击保存,即可。

(操作效果如图2.1-1 所示)

图2.1-1 项目薪资表效果图

(2)项目营收表的创建与配置

作为" 项目营收 "数据的来源。

操作步骤:

a、 新建普通表单,命名为:「项目营收表」;

b、 在表单编辑页面分别添加名为" 日期 "的日期组件,并将右侧 属性-格式 设置为 年-月;

c、 添加名为" 项目名称 "的单行文本组件及名为" 项目总金额 "的数值组件;

d、 点击保存,即可。

(操作效果如图2.1-2 所示)

图2.1-2 项目营收表效果图

2.1.2 步骤二:报表页面的创建与配置

用于承载上述两个表单的数据的展示。

操作步骤:

a、 新建报表页面,命名为:「数据分析及展示」;

b、 页面上方选择 布局>>分栏,以使用分栏组件;

c、 页面上方选择 表格>>基础表格,并将其放置在 分栏组件 左侧;

d、 点击选中 步骤c 生成的表格,点击页面右侧 数据-数据集-选择数据集 按钮,选中 「项目薪资表」;

e、 将页面右侧 数据-字段 中 " 月_日期 "、" 项目薪资 " 及" 项目名称 "三个字段拖拽到 数据-表格列中;

f、 重复 步骤c、d、e 将「项目营收表」的数据展示到 分栏组件 右侧。

(操作效果如图2.1-3 所示)

图2.1-3 分栏组件放置表格效果图

2.1.3 步骤三:合并列数据

当同一时间段内存在相同项目名称的两条不同的数据,使用合并单元格功能,即可实现单元格的合并。

有合并需求的单元格需要将被合并的列拖动到表格的最前方显示,否则会导致合并失败。

操作步骤:

a、 点击选中需要进行合并单元格操作的表格,在这里我们选择项目营收表;

b、 将日期一列放置表格最前方显示;

c、 在右侧 属性配置栏中 点击 样式 并将合并单元格开关置为开启状态(开启状态为绿色)。

(操作效果图如图2.1-4 、2.1-5 所示)

图2.1-4 合并单元格

图2.1-5 效果展示

2.1.4 步骤四:拖入指标卡组件

使用 指标卡组件 用于更直观的显示计算项目薪资总和、项目总金额等。

操作步骤:

a、 拖拽 指标卡组件 到分栏布局的左侧,放置项目薪资表上方;

b、 在右侧 属性配置栏中 选择数据集 >> 项目薪资表;

c、 点击 项目薪资 字段拖拽到指标中即可;

d、 重复 步骤a、b、c将「项目营收表」的 项目总金额 展示到 分栏组件 右侧。

(操作效果图如图2.1-6 所示)

图2.1-6 设置指标卡组件

2.1.5 步骤五:添加筛选组件

通过一对多筛选的功能,控制时间筛选组件同时筛选四个组件,如下:

操作步骤:

a、 拖拽 筛选 >> 时间筛选 组件到页头;

b、 在右侧 属性配置栏中 点击 样式 并将区间开关置为开启状态(开启状态为绿色);

b、 属性配置栏中 选择数据集 >> 项目薪资表;

c、 点击 月_年月 字段拖拽到 查询字段中 即可。

(操作效果图如图2.1-7 所示)

d、选择数据集为「项目营收表」的表格/指标卡 >> 点击右侧下方 添加条件过滤 >> 筛选器过滤 >> 将需要匹配相同数据的本地字段选中。

(操作效果图如图2.1-8 所示)

图2.1-7 选择数据集

图2.1-8 添加条件过滤

2.1.6 效果展示

图2.1-9 效果展示

2.2 方案二:视图表展示多表关联

2.2.1 步骤一:视图表创建与配置

操作步骤:

a、点击应用 页面上方 应用数据,选择左侧 数据集 >> 新建数据集 >> 新建视图表 >> 命名为「数据测试表」(操作效果图如图2.2-1所示);

b、在右侧 数据集中 选择数据集 >> 配置主数据表为「项目营收表」 >> 关联数据表为「项目薪资表」;

图2.2-1 新建视图表

2.2.2 步骤二:选择关联类型

选择左关联(左关联适用于即使关联关系不满足,主表的信息也需要显示的情况),如何使用视图表 中详细介绍了关联类型

操作步骤:

a、 关联类型选择左关联,并且配置关联关系主表字段为「项目营收表」里面的日期字段,关联数据表为「项目薪资表」里面的年月字段;

b、点击确认 保存 即可。

(操作效果图如图2.2-2所示)

图2.2-2 关联关系配置

2.2.3 步骤三:新建报表页面与配置

操作步骤:

a、 新建报表页面,命名为:「数据分析及展示」;

b、 页面上方选择 表格>>基础表格,拖拽带页面中;

c、 点击选中 步骤b 生成的表格,点击页面右侧 数据-数据集-选择数据集 按钮,选中 「数据测试表」;

d、 将页面右侧 数据-字段 中 " 月_日期 "、" 项目总金额 " 及" 项目名称 "三个字段拖拽到 数据-表格列中;

(操作效果如图2.2-3 所示)

e、 使用表格列中 fx 根据年月计算薪资总和,利用SUM求和公式计算总薪资,本方案中只需要计算项目薪资,因此需要排除其余可能干扰的字段 >> 项目总金额、项目名称等。

(操作效果如图2.2-4 所示)

SUM (<度量字段>,[条件],[排除字段]) 返回合乎[条件]下, 对<字段>进行求和的结果, [排除字段] 不参与求和的交叉计算

图2.2-3 选择数据集

图2.2-4 添加公式

2.2.4 步骤四:合并列数据

和方案一中相同,当同一时间段内存在相同项目名称的两条不同的数据,使用合并单元格功能,即可实现单元格的合并。

有合并需求的单元格需要将被合并的列拖动到表格的最前方显示,否则会导致合并失败。

操作步骤:

a. 点击选中需要进行合并单元格操作的表格,在这里我们选择「数据分析及展示」表;

b. 将日期一列放置表格最前方显示;

c. 在右侧 属性配置栏中 点击 样式 并将合并单元格开关置为开启状态(开启状态为绿色)。

(操作效果如图2.2-5 所示)

图2.2-5 合并列数据

2.2.5 效果展示

图2.2-6 效果展示

3. 方案对比展示

图3-1 效果展示

4. 在线试玩

宜搭为了更好的优化宜搭使用手册内容和质量,占用您3-5分钟时间,辛苦填写一下文档反馈问卷。文档反馈问卷是匿名提交,同时问卷信息仅用于宜搭文档体验反馈收集,感谢您对宜搭的支持!

点此填写调研问卷


--------------------获取宜搭最新信息,欢迎关注我们--------------------

Copyright © 2024钉钉(中国)信息技术有限公司和/或其关联公司浙ICP备18037475号-4