历史版本29 :地图钻取与联动 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 预期效果

  • 模板中包含地图和表格,地图可实现钻取,表格中数据可以跟随地图钻取省份进行联动。

  • 模板中地图与图表进行联动,点击地图中某个城市,图表展示该城市的数据。

如下图所示:

56D786E9-5ABD-4404-B9ED-597AD8838CA3.GIF

1.2 实现思路

通过设置参数联动钻取地图和其他数据模块。

注:在普通报表中,无法直接在一张模板中实现图表传参给单元格,需借助网页框控件,详情可参考文档 数据钻取到当前模板  。

2. 示例编辑

2.1 准备数据

新建决策报表,新增 2 个数据库查询数据集,获取地图数据:

ds1:SELECT * FROM 地图

ds2:SELECT * FROM 地图 where 1=1 ${if(len(province) = 0 || province=='中国'," order by 销售额 desc","and pid='"+province+"'")} 

其中 ds2 数据集定义了参数 province,当 province 为空或为中国时,取出全部数据并按销售额降序排序;若 province 不为空,那么用 pid 字段值匹配输入的省份,取出对应的省份数据,并按销售额降序排序。

如下图所示:

Snag_4ed0104.png

2.2 设计地图

2.2.1 拖入地图组件

将「钻取地图」拖入决策报表 body 中,如下图所示:
Snag_105e1560.png

2.2.2 地图类型

编辑图表,右侧图表属性面板选择「类型」,选择「钻取地图>区域地图」,地图边界选择「中国」,GIS 图层选择「标准>远山黛」,其余设置默认即可。如下图所示:

Snag_1062d5ee.png

2.2.3 绑定数据

1)右侧属性面板选择「数据>钻取层级」,可设置钻取层级属性,详情可参见:地图钻取 。这里我们就使用默认设置即可,如下图所示:

Snag_98948.png

2)选择「数据>数据」,选择「各层级分别指定」。这里根据读取的地图文件,默认有 3 个层级,我们只需要设置「第1层」和「第2层」的数据即可。详细设置如下图所示:

Snag_100263.png

2.3 设计报表块

2.3.1 拖入报表块

拖拽一个报表块到钻取地图的右边,适当调整地图与报表块的尺寸比例。如下图所示:

Snag_4f197c2.png

2.3.2 设计表格

表格分为上下两部分:

  • 上半部分根据点击的地图省市一一对应显示,并用柱形图辅助展现数据,柱形图数据来源于单元格。

  • 下半部分根据点击的地图省市展示其下属地区的数据。

最终样式如下图所示:

Snag_4f558d1.png

注:表格设置繁多,本文仅对重点部分进行简要讲解,详情请下载文末模板自行查看。

1)设置上下两部分标题

A1 单元格插入公式:if(len($province) = 0 || $province = "中国", "全国数据", $province + "数据")

A14 单元格插入公式:if(len($province) = 0 || $province = "中国", "全国下属地区数据", $province + "下属地区数据")

两个公式的作用是:作为上下两部分表格的标题,可随着 province 参数动态变化,且当 province 为空或等于「中国」时,标题为全国数据。

2)为了与地图产生联动,多个单元格需要添加过滤条件,具体设置如下表:

单元格
单元格内容过滤条件说明
A3ds1.G(省份)(列名:省份)等于公式:if(len($province) = 0 || $province = "中国", ds1.select(省份,len(pid)=0), $province)当 province 为空或等于「中国」时,获取 ds1 数据集中满足「pid」为空的「省份」,否则根据参数 province 显示数据
B3ds1.求和(销售额)(列名:省份)等于 'A3'

这里 B3 单元格无法根据 A3 单元格显示数据,故设置过滤条件使其跟随 A3 单元格显示数据

注:C3、D3、E3 单元格均需设置左父格为自定义 B3 单元格

A16ds2.G(pid)len(pid) != 0展示 ds2 数据集「pid」数据列中不为空的所有数据
A17ds2.G(省份)(列名:pid)等于 $province当 ds2 中「pid」等于参数 province 时,展示 ds2 数据集「省份」数据列所有数据
A18ds1.G(省份)(列名:省份)等于 $province and len(pid) != 0展示 ds1 中「省份」等于参数 province 且「pid」不为空的数据

以 A3 单元格为例,双击单元格弹出数据列设置框,步骤如下图所示:

Snag_6c2637.png

3)设置条件属性

给单元格设置条件属性,满足表格数据根据参数 province 变化的需求。具体设置如下:

单元格
条件属性说明
A3

属性:新值「全国」

条件:公式= len($province) = 0 || $province = "中国"

当参数 province 为空或等于「中国」时,单元格值为字符串「全国」
A16

属性:行高为 0

条件:公式= len(province) != 0 && $province != "中国"

当参数 province 不为空且不等于「中国」时,隐藏当前行
A17

属性:行高为 0

条件:len(province) = 0 || $province = "中国" or len($$$) = 0

当参数 province 为空或不等于「中国」,或者当前单元格值为空时,隐藏当前行
A18

属性:行高为 0

条件:len($$$) = 0

当前单元格值为空时,隐藏当前行

以 A3 单元格为例,步骤如下图所示:

Snag_51fe42d.png

2.4 联动设置

钻取地图和报表块都已经设置好后,如果要实现 联动,则需要设置交互属性。在钻取地图中设置超链的地方有两处,分别是「钻取」和「超级链接」。如下图所示:

Snag_547cfb8.png

  • 钻取:针对钻取地图左上角的钻取目录设置超链,点击目录时即可联动。

  • 超级链接:针对地图区域设置超链,点击地图区域时即可联动。

1)钻取目录处添加超链

编辑地图,右侧属性面板选择「特效>交互属性」,「钻取目录」点击开启,点击「添加链接」按钮,选择「当前表单对象」,选择表格所在报表块 report0,添加 province 参数,值选择「区域名」。如下图所示:

Snag_53027a1.png

2)超级链接处添加超链

在下方「超级链接」处添加一个一样的超链,如下图所示:

Snag_5364ba6.png

注:AREA_NAME 是图表自带的参数,对应区域名称。

2.5 效果预览

2.5.1 PC 端

保存模板,点击「PC 端预览」,效果如 1.1 节预期效果所示。

2.5.2 移动端

App 端和 HTML5 端均支持,效果如下图所示:

082C73BA-8640-49D2-8622-E8D7E2E02EB4.GIF

3. 模板下载编辑

已完成模板可参考:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\地图钻取与联动.frm

点击下载模板:地图钻取与联动.frm