1. 概述
1.1 版本
| 报表服务器版本 |
|---|
| 11.0 |
1.2 预期效果
示例效果如下所示：
左上角为所有销售员的销量统计表。
右上角为每个地区下销售员的销量柱形统计图，使用单元格元素图表和单元格数据源。
下方为两个地区的总销量饼状统计图，使用悬浮元素图表和数据集数据源。
2. 示例
2.1 数据准备
点击设计器左上角「文件>新建普通报表」，新建数据库查询 ds1，SQL 查询语句：SELECT * FROM 销量，取出销量表中的所有数据。
2.2 选择主题
点击报表上方的主题名称，弹出主题选择界面，选择「清爽科技」主题。如下图所示：
注：主题样式设置请参见文档 模板主题管理 。
2.3 设计报表
2.3.1 设计表格
1）A1~C1 单元格写入表格表头信息，选中 A1~C1 单元格，点击右侧属性面板「单元格属性>样式」，样式设置默认「跟随主题」，选中「表头」样式。如下图所示：
2）将数据集中的字段拖入到对应单元格中，选中 A2~C2 单元格，样式选择「正文」。如下图所示：
3）选中 C2 单元格，右边属性面板选择「单元格元素>基本」。数据设置选择「汇总>求和」。
到这里表格数据部分就制作完成了，保存报表，点击 分页预览 看一下效果：
2.3.2 插入柱形图
接下来我们制作表格右侧部分的柱形图。
1）合并 D1~H1 单元格，写入表头信息「柱形统计图」；合并 D2~H2 单元格，作为柱形图插入位置。选中 C1 单元格，点击报表上方「格式刷」，再点击 D1 单元格，可快速复制单元格样式，D2 单元格同理。如下图所示：
2）选中合并后的单元格 D2，点击「插入图表」快捷按钮，插入一个柱形图。
3）选中柱形图所在单元格 D2，右边属性面板选择「单元格元素>数据」。数据设置如下表：
| 设置项 | 内容 | 说明 |
|---|---|---|
| 数据来源 | 单元格数据 | 图表数据来源于单元格 |
| 分类名 | =B2 | 以 B2 单元格的销售员字段作为分类名 |
| 系列名 | 销量 | 系列名为「销量」 |
| 值 | =C2 | 以 C2 单元格的销量数据作为系列值 |
注：分类名、系列名、值的内容可直接在编辑框中输入文本，也可点击右侧的 F(x) 进入公式定义界面输入公式。以分类名为例，直接在分类名右侧编辑框中输入「=B2」，与在公式定义界面输入「B2」是一样的。
步骤如下图所示：
4）由于 D1 单元格已经设置了柱形图的标题，所以我们将柱形图本身的标题取消。
选中柱形图所在单元格 D2，右边属性面板选择「单元格元素>样式>标题」，「标题可见」默认是勾选的状态，这里将勾选取消。
5）报表预览时，考虑到美观性，本示例将图表 工具栏 去掉。
选中柱形图所在单元格 D2，右边属性面板选择「单元格元素>特效>交互属性>工具栏>内容」。将默认勾选的排序、导出图片、全屏展示取消勾选即可。
6）设置柱形图跟随「地区」字段所在 A2 单元格扩展，那么每个地区下只显示一个柱形图。
选中柱形图所在单元格 D2，右边属性面板选择「单元格属性>扩展」。扩展方向选择「不扩展」，自定义左父格为 A2 单元格。
7）保存报表，点击「分页预览」看下效果：
2.3.3 插入饼图
最后我们用悬浮元素图表来制作饼图。
1）选择右侧属性面板 悬浮元素 ，插入一个饼图，如下图所示：
2）绑定饼图数据如下表：
| 设置项 | 内容 | 说明 |
|---|---|---|
| 数据来源 | 数据集数据 | 图表数据来源于数据集 |
| 分类 | 无 | 没有分类名 |
| 系列名使用 | 字段值 | 以数据集中字段的值作为系列名 |
| 系列名 | 地区字段 | 以地区字段的值作为系列名，例如：华北、华东 |
| 值 | 销量字段 | 以地区对应的销量作为系列值 |
| 汇总方式 | 求和 | 获取地区下的销量进行求和之后的值 |
步骤如下图所示：
3）点击「悬浮元素>样式」，设置标题为「地区总销量」，位置选择「靠左」，字符保持默认「跟随主题」。如下图所示：
2.4 效果预览
2.4.1 PC 端
保存报表，点击「分页预览」，效果如 1.2 节预期效果所示。
2.4.2 移动端
移动端查看报表的方式参见 报表移动端预览 。
本示例中饼图使用的悬浮元素，悬浮元素不支持移动端，故不显示饼图。效果如下图所示：
3. 模板下载
已完成模板可参见：%FR_HOME%\webroot\WEB-INF\reportlets\doc\Chart\图表入门示例.cpt
点击下载模板：图表入门示例.cpt
