图表入门示例

1.1 版本

1.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，右边属性面板选择「单元格元素>数据」。数据设置如下表：

注：分类名、系列名、值的内容可直接在编辑框中输入文本，也可点击右侧的 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 移动端

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

本示例中饼图使用的悬浮元素，悬浮元素不支持移动端，故不显示饼图。效果如下图所示：

已完成模板可参见：%FR_HOME%\webroot\WEB-INF\reportlets\doc\Chart\图表入门示例.cpt

点击下载模板：图表入门示例.cpt