地图数据轮播和联动

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

    1.1 应用场景

    某些情况下地图轮播时需要将省份高亮展示,并且可以联动其他图表达到拓宽地图数据展示维度的目的,如下图所示:

    1595989049346086.gif

    1.2 实现思路

    • 地图省份高亮的效果通过设置条件属性来实现。

    • 地图和其他图表之间的联动通过参数面板来实现,具体方法为将所有区域名放到参数面板上的一个文本控件里,文本控件初始化事件依次取值,赋给下拉框控件,然后用下拉框控件来过滤查询。

    2. 示例

    2.1 数据准备

    1)新建数据集 ds1,数据库查询语句为:SELECT * FROM 地图 where 省份 like '%省'

    Snag_28bc4d.png

    2)新建数据集 ds2,数据库查询语句为:SELECT * FROM 地图 where 1=1 ${if(len(省份)==0,"","and 省份='"+省份+"'")} and 省份 like '%省'

    Snag_2ad9fa.png

    2.2 报表设计

    1)如下图将参数界面拖入到报表设计主体,参数界面中添加标签控件、下拉框控件、查询按钮、文本控件,其中文本控件设置为不可见。再将地图和柱形图拖入到报表设计主体中。

    Snag_2cc033.png

    2)编辑地图,如下图绑定好地图数据。

    Snag_31ce85.png

    如下图设置条件属性,实现轮播省份红色高亮的效果。

    Snag_35360e.png

    3)编辑柱形图,如下图绑定好柱形图的数据。

    Snag_3832a4.png

    4)选中文本框控件,设置文本框的控件值为公式:sql("FRDemo","select 省份 from 地图 where 省份 like '%省'",1)

    Snag_3c5c14.png

    文本框控件添加一个初始化事件,JS 代码为:

    var text0=this.getValue();
    var arr=text0.split(",");
    var i=1;
    var a=this.options.form.getWidgetByName("省份");
    setInterval(function(){
    var value=arr[i];
    if(i<=arr.length){
    a.setValue(value);
    _g().parameterCommit();
    if(i==arr.length-1){
    i=0;
    }
    else{i=i+1;}
    }
    },5000);


    5)选中下拉框控件,如下图设置数据字典

    Snag_400416.png

    2.3 效果预览

    保存报表,点击表单预览,报表效果如应用场景中所示。

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\地图数据点轮播联动.frm

    点击下载模板:地图数据点轮播联动.frm


    附件列表


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