图表自身钻取并返回

1.1 预期效果

如 地图钻取，当点击省份时，可以钻取到该省份下的各城市数据。那么普通的图表如何实现这种效果呢？

以柱形图为例，预期效果如下：

图表初始化时显示「地区销售额」，点击「华东」地区向下钻取华东所有销售员的销售额数据，点击某个销售员向下钻取该销售员的销售额数据，点击右侧超链接返回上一层级。

1.2 实现思路

在不同的数据集中定义 SQL 参数，图表绑定数据时使用「单元格数据」，再使用公式获取数据集数据。

通过给图表添加「特效>交互属性>超级链接」实现根据参数改变图表获取的数据，从而实现图表自身钻取。

注：本文方法同样适用于 FVS 可视化看板、决策报表，详细设置请下载文末示例自行查看。

2.1 数据准备

新建普通报表，新建三个数据库查询，分别如下：

ds1：SELECT 地区,sum(销量) as 销售额 FROM 销量 group by 地区

ds2：SELECT 销售员,sum(销量) as 销售额 FROM 销量  where  地区 = '${area}' group by 销售员

ds3：SELECT 产品类型, sum(销量) as 销售额 FROM 销量  where 地区 = '${area}' and 销售员 = '${spe}' group by 产品类型

ds2 和 ds3 中定义了地区为参数 area ，销售员为参数 spe ，且默认值均为空。以 ds3 为例，步骤如下图所示：

2.2 设计图表自身钻取

2.2.1 插入图表

合并一片单元格区域，插入一个柱形图。

2.2.2 绑定数据

选中图表，绑定图表数据为「单元格数据」。

• 分类名为公式：if(len($area) = 0, ds1.select(地区), if(len($spe) = 0, ds2.select(销售员), ds3.select(产品类型)))

• 系列名为文本：销售额
  

• 系列值为公式：if(len($area) = 0, ds1.select(销售额), if(len($spe) = 0, ds2.select(销售额), ds3.select(销售额)))

分类名和系列值的公式意义为：当 area 地区为空时，获取 ds1 数据集中的地区作为分类，销售额作为系列值；当 area 不为空，spe 为空时，获取 ds2 数据集中销售员作为分类，销售额作为系列值；当 area 不为空，spe 也不为空时，获取 ds3 数据集中的产品类型作为分类，销售额作为系列值。

如下图所示：

2.2.3 设置图表超链

选择图表「特效>交互属性>超级链接」，添加一个「图表超链-联动单元格」。

注：在 FVS 可视化看板中，图表则添加点击事件「组件联动」，文字组件添加的组件联动事件内容则与普通报表一致。在决策报表中，图表块则添加「当前表单对象」，报表块中单元格添加的超链则与普通报表一致。

1）联动单元格为 A1，即图表所在单元格。

2）添加参数：

如下图所示：

2.2.4 设置标题

标题使用公式：if(len($area) = 0, "地区销售额", $area + $spe + "销售额")。如下图所示：

公式说明：当参数 area 为空时，标题为「地区销售额」；当图表下钻时，图表标题根据 area 和 spe 参数的值变化，为「对应地区+对应销售员+销售额」。

2.2.5 效果预览

完成以上步骤，就可以实现图表的自身钻取了。点击 分页预览 效果如下图所示：

2.3 设计图表钻取后返回

我们希望图表钻取后，可以再返回上一层级。这种情况我们需要借助动态参数和单元格超级链接来实现。

2.3.1 图表设置动态参数超链

「图表超链-联动单元格」只能用于联动单元格中的图表，不支持联动其他不是图表的单元格。所以我们需要通过「动态参数」超级链接实现单元格联动。

注：使用动态参数，整个模板都会刷新，使用到该参数的地方均会联动发生变化。

选中图表，点击「单元格元素>特效>交互属性>超级链接」，添加一个「动态参数」类型的超链。

添加与 2.2.3 节相同的参数：

如下图所示：

2.3.2 设置单元格超级链接

1）在右侧单元格中，输入文本「返回地区层级」。给其添加一个「动态参数」类型的超级链接，链接中添加参数 area，不给参数赋值，即实现参数 area 为空的场景，图表则获取 ds1 数据集中的地区作为分类，销售额作为系列值。

如下图所示：

2）同理，在另一个单元格中输入文本「返回销售员层级」。给其添加一个「动态参数」类型的超级链接，链接中添加参数 area，赋值为公式 $area ；添加参数 spe ，不给其赋值。即实现 area 不为空，spe 为空，图表则获取 ds2 数据集中销售员作为分类，销售额作为系列值。

如下图所示：

2.4 效果预览

2.4.1 PC 端

保存报表，点击 分页预览，效果如 1.1 节预期效果所示。

2.4.2 移动端

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

已完成模板可参见：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\图表自身钻取并返回.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\图表自身钻取并返回.frm

点击下载模板：

图表自身钻取并返回.cpt

图表自身钻取并返回.fvs

图表自身钻取并返回.frm