FVS实现跳转不同网页链接

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

1.1 版本

1.2 应用场景

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

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

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.1 新建模板

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

2.2 准备数据

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

2.3 添加饼图组件

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

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

2.4 设置 JavaScript 事件

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

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

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

输入 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 效果预览

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

注：不支持移动端。

点击下载模板：FVS实现跳转不同网页链接.fvs