反馈已提交

网络繁忙

JS实现按分类钻取图表

  • 文档创建者:a-pity
  • 历史版本:12
  • 最近更新:TW 于 2023-10-18
  • 1. 概述

    1.1 预期效果

    在图表的应用需求中,有时候会需要按照图表类型去钻取到相应页面,如下图所示:

    1571218283619946.gif


    1.2 实现思路

    使用 iframe 实现当前页钻取,并弹出框方式展示。

    var iframe = $("<iframe id='001' name='001' width='100%' height='100%' scrolling='yes' frameborder='0'>") 
    // iframe参数的命名及宽高等
    if (参数 == '分类1') {    //判断点击到的点,根据所选纬度弹出明细对话框
        iframe.attr("src", "report?viewlet=/详细1.cpt&op=view&参数=" + 参数 + "")
    }
    ..........else
    ........
    var o = {
        title: wd,    //对话框标题(这里取雷达图纬度名作弹出框标题)
        width: 1265,  //宽   统一宽高
        height: 370  //高}
    FR.showDialog(o.title, o.width, o.height, iframe, o) //弹出对话框

    注:类似 FVS 钻取可参考文档 FVS实现跳转不同网页链接 。

    2. 操作步骤

    2.1 新建模板

    在 FineReport 设计器中,点击「文件>新建决策报表」,在图表块中选择雷达图拖入到决策报表中,如下图所示:

    1571212097716308.png

    2.2 数据准备

    1)新建 内置数据集 ,如下图所示:

    1571212343523055.png

    2)鼠标左键点击决策报表中央的「编辑」,在右侧属性面板中选择「控件设置>数据」,雷达图的数据设置如下图所示:

    1571212808400531.png

    2.3 添加超级链接

    在属性面板右侧选择「控件设置>特效」,在超级链接处添加「JavaScript」超级链接,其中需要添加「wd」和「jd」这两个参数。

    参数备注
    wdCATEGORY取雷达图所点击的点
    jd$jd取参数下拉所选参数

    如下图所示:

    1571213823353975.png

    JS 代码如下所示:

    var iframe = $("<iframe id='001' name='001' width='100%' height='100%' scrolling='yes' frameborder='0'>") 
    // iframe参数的命名及宽高等
    if (wd == '产品') {    //判断点击到的点,根据所选纬度弹出明细对话框
    iframe.attr("src", "report?viewlet=/demo/analytics/sales/按产品统计营收.frm&op=view&jd=" + jd + "")}
    else if (wd == '分公司') {
    iframe.attr("src", "report?viewlet=/demo/analytics/sales/按分公司统计营收.frm&op=view&jd=" + jd + "")}
    else if (wd == '地区') {    
    iframe.attr("src", "report?viewlet=/demo/analytics/sales/按地区统计营收.frm&op=view&jd=" + jd + "")}
    else if (wd == '时间') {    
    iframe.attr("src", "report?viewlet=/demo/analytics/sales/按时间统计营收.frm&op=view&jd=" + jd + "")}
    var o = {    title: wd,    //对话框标题(这里取雷达图纬度名作弹出框标题)    
                 width: 900,  //宽   统一宽高    
                 height: 300 //高
             }
    FR.showDialog(o.title, o.width, o.height, iframe, o) //弹出对话框

    用户若需要单独定义每个弹出框的宽高,JS 代码如下所示:

    var url = "";
    var title = "";
    var o = "";
    if(wd=="产品"){    
    url = "report?viewlet=/demo/analytics/sales/按产品统计营收.frm&op=view&jd=" + jd + "";
    title = wd;    
    o = {width : 400,  //对话框宽度
    height: 400   //对话框高度     
    };} 
    if(wd=="分公司"){    
    url = "report?viewlet=/demo/analytics/sales/按分公司统计营收.frm&op=view&jd=" + jd + "";
    title = wd;    
    o = {width : 600,  //对话框宽度
    height: 300   //对话框高度     
    };}
    if(wd=="地区"){    
    url = "report?viewlet=/demo/analytics/sales/按地区统计营收.frm&op=view&jd=" + jd + "";
    title = wd;    
    o = {width : 900,  //对话框宽度
    height: 400   //对话框高度     
    };}
    if(wd=="时间"){    
    url = "report?viewlet=/demo/analytics/sales/按时间统计营收.frm&op=view&jd=" + jd + "";
    title = wd;    
    o = {width : 1000,  //对话框宽度
    height: 200   //对话框高度     
    };}
    var iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='yes' frameborder='0'>"); 
    // 对话框内iframe参数的命名,默认宽高占比是100%,可向下滚动    
    iframe.attr("src", url); // 给iframe添加src属性 
    //弹出对话框
    FR.showDialog(title, o.width, o.height, iframe,o);

    当在决策系统中预览时,可能会出现打开弹出框报错,首次访问时跳转到明细的链接不正确

    11.png

    解决方法:修改JavaScript

    2222.png

    添加url参数:动态获取访问地址

    公式= "http://"+serverName+":"+serverPort+servletURL+"?viewlet="

    serverName 是指服务器地址或名称。示例地址中,serverName 指的是:localhost,即访问机子的 IP。

    serverPort是指访问的端口。示例地址中,serverPort 指的是:8075。

    servletURL 是指 servlet 的 URL。示例地址中,servletURL 指的是:/webroot/decision/view/report,其参数${servletURL}的具体应用场景,可参考:网页框控件 文档。

     修改链接:

      iframe.attr("src", url"+/test/明细1.cpt&op=view&jd=" + jd + "")

    2.4 效果查看

    保存模板,点击「PC端预览」,效果同本文1.1章「预期效果」相同。

    注:该方法不支持移动端。

    3. 已完成模板

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\31-JS实现按分类钻取图表.frm

    点击下载模板:31-JS实现按分类钻取图表.frm

    4. 注意事项

    4.1 IE报400错误

    4.1.1 问题描述

    在 IE 浏览器中钻取页面,打开 iframe 时报错:java.lang.IllegalArgumentException: 在请求目标中找到无效字符。有效字符在RFC 7230和RFC 3986中定义,如下图所示:

    1.png

    4.1.2 解决方案

    这是由于 URL 中的中文没有使用 UTF-8 编码导致的,解决方案有两个:

    1)方法一

    勾选 IE 浏览器的「发送intranet URL 的 UTF-8 查询字符串」设置项,如下图所示:

    2.png

    2)方法二

    将 JavaScript 脚本中 iframe 的 src 属性 使用 encodeURI("**") 进行编码,需要修改下代码。代码如下:

    var iframe = $("<iframe id='001' name='001' width='100%' height='100%' scrolling='yes' frameborder='0'>") // iframe参数的命名及宽高等

    var src =null;
    if (wd == '产品') {    //判断点击到的点,根据所选纬度弹出明细对话框
        src="report?viewlet=/demo/analytics/sales/按产品统计营收.frm&op=view&jd=" + jd + "";}
    else if (wd == '分公司') {
        src="report?viewlet=/demo/analytics/sales/按分公司统计营收.frm&op=view&jd=" + jd + "";}
    else if (wd == '地区') {    
        src="report?viewlet=/demo/analytics/sales/按地区统计营收.frm&op=view&jd=" + jd + "";}
    else if (wd == '时间') {    
        src="report?viewlet=/demo/analytics/sales/按时间统计营收.frm&op=view&jd=" + jd + "";}
    if(src){
    iframe.attr("src",encodeURL(src))
    }
    var o = {    title: wd,    //对话框标题(这里取雷达图纬度名作弹出框标题)    
                 width: 900,  //宽   统一宽高    
                 height: 300 //高
             }
    FR.showDialog(o.title, o.width, o.height, iframe, o) //弹出对话框


    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持