第一张普通报表

1.1 报表设计流程图

1.2 第一张报表效果

本文将通过制作一张报表，简单介绍下 FineReport 的主要功能。在制作这张简单普通报表之前，我们先来看一下报表最终呈现出来的效果，然后我们再根据这个效果来设计报表。

这张报表由三部分构成：

• 参数面板：通过下拉框控件选择地区，查询出对应地区的数据。

• 表格：表格统计该地区下各销售员每个产品的销量。

• 柱形图：柱形图将表格中的数据以图表的形式进行展示。

2.1 新建数据连接

新建 数据连接 的目的是让 FineReport 设计器连接数据库，这样报表就可以在数据库中读取、写入或修改数据。

打开设计器，点击最上方菜单栏中「服务器>定义数据连接」，弹出「定义数据连接」对话框，设计器已经默认连接了一个名为 FRDemo 的内置数据库，点击「测试链接」，弹出「连接成功」提示框，表示数据库 FRDemo 成功与设计器建立连接。

接下来就可以从这个数据库中取数用于报表的设计。

2.2 新建报表

1）菜单栏点击「文件」可选择新建报表的类型，点击快捷按钮  可快速新建一张空白的「普通报表」。如下图所示：

本文示例新建的是「普通报表」。

2）新建报表时，报表会默认选择设计器应用于模板创建的主题，主题中对于模板样式、单元格样式、图表样式等已经进行了设计，在制作报表时，可以选择「跟随主题」即可快速复用主题中的样式。更多主题相关功能说明请参见：模板主题管理 。 

普通报表默认主题为「经典浅灰」，主题名称展示在报表最上方工具栏处，点击可弹出「主题选择」页面，本示例选择「清爽科技」主题。

2.3 准备数据

数据集是报表设计时的直接数据来源。数据集按照作用范围分为两种：服务器数据集 和 模板数据集，它们之间的区别可参见：数据集 。

本示例在数据集管理面板中选择「模板数据集」，点击上方的 ，新建 数据库查询 ds1，输入 SQL 查询语句：SELECT * FROM 销量 ，取出「销量」表中的所有数据。

新建好数据集之后，可在数据集管理面板查看取出的数据。如下图所示：

至此报表的数据准备工作已经完成，下面对报表的样式进行设计。

2.4 表格设计

1）大标题

选中 A1~D2 单元格，点击「合并单元格」按钮，将其合并。如下图所示：

写入报表标题「地区销售概况」，点击右侧属性面板「单元格属性>样式」，选择「跟随主题>大标题」。如下图所示：

注：这里的样式来源于选择的「清爽科技」主题，若想要单独修改某个单元格样式可选择「自定义」进行修改，若想要修改主题样式请参见： 模板主题管理 。

2）单元格斜线

从 1.3 节效果图我们可以看到，左上角有一个用斜线分隔显示三个表头字段信息的单元格。

将 A3 、B3 单元格合并后选中，点击上方工具栏「插入斜线」按钮，弹出斜线编辑对话框，在文本编辑框写入文字：     产品|   销售员|       地区。如下图所示：

注：此处使用的竖线符号为英文模式下的符号，同时可以通过添加空格来调整文字的位置。

适当调整一下 A3 单元格的宽高，再设置 A3 单元格样式为「跟随主题>小标题」。如下图所示：

当设置为主题的「小标题」样式时，我们可以看到单元格字体较大，这时我们可以再点击「自定义」，各项设置均会保留主题中的样式，只需要修改下字体大小即可。

修改之后可看到单元格样式已经发生了变化，如下图所示：

3）填充表格数据

将数据集中需要展示的数据列拖入到对应单元格中。如下图所示：

数据列拖入单元格时，单元格扩展 默认纵向扩展，我们需要将「产品」所在 C3 单元格设置为「横向扩展」。

选中 C3 单元格，点击「单元格属性>扩展」，修改扩展方向。如下图所示：

4）计算总销量

本例中需要横向统计每个销售员的销售总量，纵向统计每个产品的销量总计。

首先输入表头，在 D3 单元格输入文本「销售总量」，将 A5、B5 单元格合并后输入文本「总计：」。

选中 C5 单元格，插入求和公式 sum(C4) ，C4 为「销量」，即纵向统计每个产品的销量总计。插入公式可使用工具栏的快捷按钮，如下图所示：

D4 单元格要横向统计每个销售员的销售总量，同理插入求和公式 sum(C4) 。但由于每个单元格均存在父子格关系，单元格会跟随父格扩展或计算，详情可参见 父子格设置 。

所以本例 D4 单元格需要根据「销售员」字段进行计算，即 D4 单元格的左父格需设置为「销售员」所在的 B4 单元格。如下图所示：

最后在 D5 单元格插入公式求所有产品销量总和，公式输入 sum(D4) 或 sum(C5) 均可。

5）设置剩余单元格样式

C3、D3、A4、B4、A5 单元格样式均设置为「跟随主题>表头」，C4、D4、C5、D5 单元格样式均设置为「跟随主题>正文」。如下图所示：

6）到这里表格部分就完成了，我们保存报表，点击「分页预览」看下效果：

2.5 参数设计

参数的作用在于通过设置参数，可以在参数面板中给参数添加控件，再将控件与报表数据进行绑定，进而实现根据参数查询指定的数据。参数相关的详细内容请参见： 参数简介 。

接下来我们开始设计报表的参数部分。

1）新增模板参数

菜单栏选择「模板>模板参数」，弹出模板参数设置对话框，新增一个参数，双击参数名重命名为「地区」，并设置默认值为「华东」。如下图所示：

2）设置参数面板

点击参数面板的编辑按钮，进入参数面板设置界面。可看到右上角控件设置面板处会显示未生成的参数，点击地区或者点击全部添加，将参数添加到参数面板。

此时会根据参数生成一个「标签控件」，一个未设置控件类型的自定义控件以及一个「查询按钮」控件，并取消勾选「点击查询前不显示报表内容」，如下图所示：

3）设置控件

点击自定义控件的编辑按钮，选择 下拉框控件 。如下图所示：

4）控件绑定数据

本例中需要通过下拉框选择华东或华北来查询对应地区下的销售数据，所以绑定的数据字典需对应华东和华北的字段信息。

选中下拉框控件，在右边的控件设置面板选择「属性」，点击数据字典「编辑」按钮，类型设置为「数据库表」，数据库为「FRDemo」，选择数据库表为「销量」，列名的实际值和显示值为「地区」。

5）选中参数面板「para」，可设置参数面板的属性和样式。本例将「点击查询前不显示报表内容」取消勾选，显示位置设置为「靠左」。如下图所示：

6）设置单元格过滤

完成参数面板的设置后，点击界面中间的「编辑」按钮 即可返回表格界面。但是设置好参数控件后还不能实现根据下拉框中的参数查询指定地区的表格数据。因为数据集中的数据是将数据库中的数据全部取出来，表格的数据直接来源于数据集，所以还需要给表格设置数据过滤条件。

双击 A4 单元格，在弹出的数据列对话框中选择「过滤」，添加一个普通条件，让地区等于参数 $地区 ，点击「增加」按钮，点击「确定」。这样就将地区单元格与参数绑定起来，当下拉框选择了地区参数进行查询时，单元格只显示该地区下的数据。如下图所示：

7）到这里就实现了参数与表格数据的联动，我们保存预览，看下效果：

2.6 图表设计

图表的作用在于可以更加直观地表现数据，提升用户的报表查看体验。本例中只是简单引出图表的概念，有关图表的详细内容请参见 图表入门 。

本例将在单元格中插入 柱形图 来直观化展示各销售员每个产品的销售总量。

1）插入图表

将 A7~D18 单元格合并后选中，点击上方工具栏「插入图表」快捷按钮，插入一个「柱形图」。如下图所示：

2）绑定图表数据

本例使用 单元格数据 ，即根据表格内容展示图形。

选中图表后，点击右侧属性面板「单元格元素>数据」，选择数据来源为「单元格数据」，分类名为公式 =B4，系列名为公式 =C3，值为公式 =C4。即图表 X轴 为 B4 单元格的「销售员」，系列为 C3 单元格的「产品」，Y轴 的值为 C4 单元格的「销量」。如下图所示：

注：分类名、系列名、值在设置的时候必须要有等号，否则单元格会被作为字符串处理。

3）图表样式设置

柱形图是对表格中地区销售数据的图形化展示，所以图表无需设置标题，那么在图表「样式>标题」中取消勾选「标题可见」即可。如下图所示：

注：本例中不对其他图表样式进行设置，各项设置均「跟随主题」即可。

4）完成图表的样式设置之后，还需要注意图表所在单元格的父格设置。本例中柱形图无需扩展，且不依赖左父格和上父格，所以需要将其扩展方向设置为「不扩展」，左父格和上父格均设置为「无」。如下图所示：

注：原理上，此处只需设置上父格为无即可。但为了方便记忆，建议将两个父格均设置为无。

至此这张报表已经制作完成，下面我们分别在 PC 端和移动端查看报表的效果。

2.7 效果预览

2.7.1 PC 端

保存报表，点击「分页预览」，效果如下图所示：

2.7.2 移动端

移动端查看报表的方式参见： 报表移动端预览 。

App 端和 HTML5 端均支持，效果如下图所示：

已完成模板可参见：%FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\第一张报表.cpt

点击下载模板：第一张报表.cpt