1. 概述
1.1 预期效果
在图表的应用需求中,有时候会需要按照图表类型去钻取到相应页面,如下图所示:
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 设计器中,点击「文件>新建决策报表」,在图表块中选择雷达图拖入到决策报表中,如下图所示:
2.2 数据准备
1)新建 内置数据集 ,如下图所示:
2)鼠标左键点击决策报表中央的「编辑」,在右侧属性面板中选择「控件设置>数据」,雷达图的数据设置如下图所示:
2.3 添加超级链接
在属性面板右侧选择「控件设置>特效」,在超级链接处添加「JavaScript」超级链接,其中需要添加「wd」和「jd」这两个参数。
参数 | 值 | 备注 |
---|---|---|
wd | CATEGORY | 取雷达图所点击的点 |
jd | $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 + "")
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中定义,如下图所示:
4.1.2 解决方案
这是由于 URL 中的中文没有使用 UTF-8 编码导致的,解决方案有两个:
1)方法一
勾选 IE 浏览器的「发送intranet URL 的 UTF-8 查询字符串」设置项,如下图所示:
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) //弹出对话框