历史版本2 :FVS实现跳转不同网页链接 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

适用场景:安装了「FineVis数据可视化」插件的用户,可参考本文了解 FVS 的相关功能。

1.1 版本

报表服务器版本
插件版本
11.0V1.0.0

1.2 应用场景

FVS 中的 网页链接/弹出框事件 可以实现跳转单个网页链接或模板,但如果需要根据不同的对象,跳转不同的链接时,则需要通过 JavaScript 事件实现。

例如根据图表系列,跳转不同模板,效果如下图所示:

1682501023318271.gif

1.3 实现思路

给组件添加 JavaScript 类型点击事件,使用 JavaScript 代码实现在新窗口打开网页链接的功能。

常用 JavaScript 代码如下表所示:

注:以下代码均是在新标签页打开,如需在当前页打开,将 window.open 替换为 window.location.replace 即可。

场景
示例
打开固定的网页

绝对路径:确保当前服务器可访问该网址即可

window.open("https://www.fanruan.com/");


打开固定的模板

绝对路径:确保当前服务器可访问该网址即可

window.open("http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt");


打开一张模板并传递参数

绝对路径:确保当前服务器可访问该网址即可

window.open("http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt&地区="+area);


按照传递的参数值,打开不同模板
if(series=='华东') /*判断系列名为华东*/
{
var URL='/webroot/decision/view/report?viewlet=demo/basic/产品明细.cpt'; 
window.open(encodeURI(encodeURI(URL))); //在新标签页打开产品明细.cpt
}
if(series=='华北') /*判断系列名为华北*/
{
var URL='/webroot/decision/view/report?viewlet=demo/basic/分组统计.cpt'; 
window.open(encodeURI(encodeURI(URL))); //在新标签页打开分组统计.cpt
}


2. 示例编辑

2.1 新建模板

点击设计器菜单栏「文件>新建可视化看板」创建空白看板,可自定义模板名称和尺寸,点击「创建看板」。如下图所示:

Snag_db69ad.png

2.2 准备数据

用户新建数据库查询「ds1」,SQL语句:SELECT * FROM 销量 。如下图所示:

1637028605FE74.png

2.3 添加饼图组件

选择组件区「图表>饼图类>饼图」,点击添加到页面中。

选中组件,在配置区设置组件「内容>数据」,设置数据集为「ds1」,分类为「无」,系列名为「地区」,值为「销量」,具体如下图所示。

1637028612s9Xz.png

2.4 设置 JavaScript 事件

选中饼图组件,点击「交互>点击事件」,添加点击事件「JavaScript」。

设置事件名称为「跳转不同模板」。

设置参数,参数名称为「area」,参数类型选择「当前组件字段」,参数内容为「系列名」。

Snag_1085add.png

输入 JavaScript 代码如下:

if(area=='华东') /*判断系列名为华东*/
{
var URL='http://localhost:8075/webroot/decision/view/report?viewlet=demo/basic/产品明细.cpt'; 
window.open(encodeURI(encodeURI(URL))); //在新标签页打开产品明细.cpt
}
if(area=='华北') /*判断系列名为华北*/
{
var URL='http://localhost:8075/webroot/decision/view/report?viewlet=demo/basic/分组统计.cpt'; 
window.open(encodeURI(encodeURI(URL))); //在新标签页打开分组统计.cpt
}

2.5 效果预览

保存模板,点击右上角「预览」按钮。按照点击的饼图的系列名,在新窗口打开不同的子模板。

注:不支持移动端。

05FB4029-1359-4183-910A-369DFB01E0CA.GIF

3. 模板下载编辑