地图钻取与联动

  • 文档创建者:Holly
  • 编辑次数:23次
  • 最近更新:Leo.Tsai 于 2020-07-29
  • 1. 概述

    1.1 预期效果

    在地图钻取的基础上,增加联动功能,点击对应区域,在右侧显示该区域详细的表格和图表数据,点击地图目录联动到相应层级。效果如下图所示:

    1587708846608528.gif

    1.2 实现思路

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

    2. 示例

    2.1 数据准备

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

    ds3 的 SQL 语句为SELECT * FROM 地图1 where 1=1 ${if(len(province) = 0||province=='中国(省级)'," order by 销售额 desc","and pid='"+province+"'")} 

    ds4 的 SQL 语句为SELECT * FROM 地图1

    2.2 地图制作

    2.2.1 拖入地图组件

    从图表管理面板将地图拖拽到决策报表的设计主体中,如下图所示:
    Snag_f4881af.png

    2.2.2 地图类型

    编辑图表,右侧图表属性面板选择类型,选择区域地图,并设置好地图的基础属性,如下图所示:

    Snag_f4975b4.png

    2.2.3 地图数据

    1)右侧属性面板选择数据>钻取层级,设置 2 层钻取层级,详细内容参见: 地图钻取 ,如下图所示:

    Snag_f4f027a.png

    2)右侧属性面板选择数据>数据,设置第一层的数据,如下图所示:

    Snag_f51e0cb.png

    3)右侧属性面板选择数据>数据,设置第二层的数据,如下图所示:

    Snag_f537a85.png

    注:

    数据可以选择 底层数据汇总 或者各层级分别指定,默认选中前者,也就是说数据只需指定钻取地图底层,上层数据根据底层汇总而成。

    如果选择各层级分别指定,则每一层级根据层级的图表类型不同,界面不同,不同层级时,数据可配置完全不同的系列。

    2.2.4 地图样式

    右侧属性面板选择样式>图例,修改区间配置,如下图所示:

    Snag_f5cf893.png

    2.2.5 地图标题

    选中地图组件,右侧属性面板选择属性>高级,点击样式后面的222按钮,选择框架样式为自定义,设置标题内容,如下图所示:

    Snag_f607d07.png

    2.3 报表块制作

    将报表块组件拖拽到钻取地图的右边,如下图设计报表块:

    222

    报表块样式和内容上的设计比较多,此处不作详细介绍,可以直接参考模板中的设计。

    单元格设置了参数过滤和条件属性,通过参数 province 来控制其显示值,详细内容参见文档:根据年份和月份参数来控制行高 ,还可 控制空值显示内容 。

    2.4 联动设置

    如上所述,地图和报表块都已经设置好了,如果要实现 联动,则需要再设置交互属性。

    1)编辑地图,右侧属性面板选择特效>交互属性,钻取目录点击开启,点击添加链接按钮,选择当前决策报表对象,设置钻取目录与表格联动,如下图所示:

    Snag_f6eea82.png

    2)钻取目录点击关闭,点击添加链接按钮,选择当前决策报表对象,设置地图与表格联动,如下图所示:

    Snag_f74305c.png

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

    注2:移动端也可支持地图名传参,钻取目录开启有效。

    注3:钻取地图设置超链的地方有两处,钻取和钻取目录,若不设置第一步,则只有左上角目录才能联动。

    2.5 效果预览

    1)PC 端

    保存模板,点击分页预览,效果如1.1预期效果中所示:

    2)移动端

    1587717321712837.gif

    4. 模板下载

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

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

    5. 注意事项

    5.1 钻取回到全国联动没有数据

    1)问题描述

    地图钻取之后,回退到最开始的中国目录,右侧联动的表格和图表数据不显示,如下图所示:

    C22996C9-3853-4501-8037-ED1D024EB511.GIF

    2)原因分析

    这是由于地图边界设置成了中国导致的,应该要设置成中国(省级)

    Snag_f88bd2a.png

    3)解决方案

    地图边界下拉选择中国(省级)即可。

    Snag_f8bc78c.png

    4)附加事项

    如果设计器地图边界下拉选项下没有中国(省级)这个选项,如下图所示:

    Snag_f8ce744.png

    可以下载:地图边界省份包.rar,将压缩包解压到%FR_HOME%\webapps\webroot\WEB-INF\assets\map\geographic\world\路径下。

    Snag_f8ec069.png

    重启设计器,就可以在地图边界下拉框下看到中国(省级)这个选项了,如下图所示:

    Snag_f906d1f.png

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!