历史版本12 :多分类饼图 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 应用场景

饼图支持每个分类生成一个饼图,且这些多分类的饼图之间共享图例,如下图所示:

Snag_1affe8da.png

1.2 实现思路

添加图表后,设置分类字段,根据分类生成多个饼图。

注:该方法同时支持单元格元素图表和悬浮元素图表。

2. 示例编辑

2.1 数据准备

新建普通报表,新建数据集 ds1 ,数据库查询语句为:SELECT * FROM 销量

1590562414286042.png

2.2 表格设计

1)如下图设计单元格表格,并将相应字段拖入单元格中,其中 B2 单元格需要汇总-求和

Snag_1b04b8d8.png

2)双击 A2 单元格,点击高级,设置结果集筛选为 3 个,目的是只取数据集中前 3 个销售员的数据,如下图所示:

1590562747283761.png

3)选中 A1 和 A2 单元格,添加一个条件属性,设置行高为 0 ,目的是在前端展示时可以隐藏掉表格内容,如下图所示:

Snag_1b0cc5b3.png

2.3 插入图表

设计器菜单栏点击插入>悬浮元素>插入图表,将饼图插入到普通报表中,如下图所示:

Snag_1b119f66.png

2.4 绑定数据

选中饼图,设置饼图分类名为 A2 单元格,系列名为 B1 单元格,值为 B2 单元格,如下图所示:

Snag_1b154413.png

2.5 效果预览

1)PC 端

保存报表,点击分页预览,效果如下图所示:

Snag_1affe8da.png

2)移动端

示例采用的是悬浮图表不支持移动端预览,但是单元格元素图表可以。

2.6 应用拓展

如果想要通过单元格元素图表实现,只需要在上面悬浮元素图表设置的基础上,更改下数据绑定设置,如下图所示:

Snag_1b1cea92.png

3. 模板下载编辑

已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\PieChart\共享图例饼图.cpt

点击下载模板:共享图例饼图.cpt