反饋已提交
網絡繁忙
在图表的应用需求中,有时候会需要按照图表类型去钻取到相应页面,如下图所示:
使用 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) //弹出对话框
在 FineReport 设计器中,点击文件>新建决策报表,在图表块中选择雷达图拖入到决策报表中,如下图所示:
1)新建 内置数据集 ,如下图所示:
2)鼠标左键点击决策报表中央的「编辑」,在右侧属性面板中选择控件设置>数据,雷达图的数据设置如下图所示:
在属性面板右侧选择控件设置>特效,在超级链接处添加「JavaScript」超级链接,其中需要添加「wd」和「jd」这两个参数。
如下图所示:
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);
当在决策系统中预览时,可能会出现打开弹出框报错,首次访问时跳转到明细的链接不正确
解决方法:修改JavaScript
添加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 + "")
保存模板,点击PC端预览,效果同本文1.1章「预期效果」相同。
注:该方法不支持移动端。
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\31-JS实现按分类钻取图表.frm
点击下载模板:31-JS实现按分类钻取图表.frm
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉