反馈已提交

网络繁忙

FVS支持的JS事件说明

  • 文档创建者:Carly
  • 历史版本:21
  • 最近更新:Harry768 于 2023-11-28
  • 1. 概述

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

    1.1 版本

    报表服务器版本
    JAR包插件版本功能变动
    11.02021-11-15V1.0.0
    -
    11.0.6-V1.5.0
    • 新增六类「控件」组件,新增控件支持的事件与接口

    • 表格内的「表格加载结束事件」变更为组件交互属性中的「初始化后事件」

    1.2 功能简介

    FVS 可视化看板中支持使用 JavaScript 代码触发联动、跳转等交互效果。

    本文主要介绍支持使用 JavaScript 代码的几种事件类型,具体的 JS 接口请参见:FVS支持的JS接口汇总

    1.3 视频教程

    2. 事件类型

    2.1 页面加载结束事件

    在 FVS 看板编辑界面,点击顶部菜单栏「模板>页面加载结束事件」,支持输入 JavaScript 代码,对整个 FVS 模板生效。

    使用「页面加载结束事件」时,若发现事件未生效,可添加延时函数 setTimeout,写法如下:

    setTimeout(() => {
    duchamp.getWidgetByName("组件1").openAutoTooltip(); //开启图表组件提示点自动轮播
    }, 500) //500表示500毫秒,0.5秒

    Snag_47932c8b.png

    2.2 初始化后事件

    「初始化后事件」为 V1.5.0 版本插件新增的事件类型,仅 表格组件 和所有 控件组件 支持初始化后事件。

    Snag_47ae5e94.png

    2.3 编辑结束事件

    「编辑结束事件」为 V1.5.0 版本插件新增的事件类型,仅「文本框控件、日期时间控件、下拉框控件、下拉复选框控件」支持编辑结束事件。

    Snag_47b2d9cc.png

    2.4 点击事件

    2.4.1 除控件外的其他组件

    选中单个组件,点击配置栏「交互>点击事件」,支持新增 JavaScript 类型的点击事件。事件在点击这个组件/组件内指定内容时生效。

    注:以下组件不支持点击事件:

    富文本组件、表格组件、轮播器组件、网页框组件、本地视频组件、本地监控组件

    轮播饼图、轮播夜光仪表盘、水球图、像素点图、轮播闪烁指标卡、轮播电子指标卡、轮播目录齿轮图、轮播三维组合地图、轮播GIS点地图、轮播条形图、弧形柱形图、粒子计数器、三维流向地球、时间齿轮

    Snag_47a3dd4f.png

    2.4.2 控件组件

    V1.5.0 版本插件新增控件以及控件事件,仅「单选按钮组控件、复选按钮组控件」支持点击事件,且点击事件仅支持使用 JavaScript 代码。如下图所示:

    Snag_486d0f3b.png

    2.5 轮播事件

    选中单个组件,点击配置栏「交互>轮播设置」,支持新增 JavaScript 类型的轮播事件。事件在这个组件/组件内指定内容轮播时生效。

    注:仅以下组件支持 JavaScript 类型的轮播事件:

    场景地图、轮播器组件、电子智慧树图、模型智慧树图、轮播饼图、轮播夜光仪表盘、水球图、像素点图、轮播闪烁指标卡、轮播电子指标卡、轮播目录齿轮图、轮播三维组合地图、轮播GIS点地图

    Snag_479be0f0.png

    3. 注意事项

    3.1 调用接口的方法

    在使用 FineReport 设计器其他报表类型时,调用全局接口一般使用 FR.xxx ,调用组件接口一般使用 _g.xxx

    但是在 FVS 模板中,调用接口的方式统一为 duchamp.xxx

    3.2 JS 脚本限制

    1)不支持引用外部 JS 、CSS 文件。

    2)不建议使用 JS 脚本直接操作 dom 结构,例如一些 document 及 jQuery 上的 API。

    因为未来产品 dom 结构可能变化,后续升级可能导致之前的 JS 获取不到对象,无法保证稳定性。

    若一定要使用,需在 JavaScript 代码前加上 "use document"; 

    例如当符合某特定条件时,比如某参数值>100,触发声音提示。JavaScript 代码示例如下:

    "use document";
    // 创建⼀个 audio 标签⽤于播放声⾳
    const audio = document.createElement("audio");
    // 指定⼀个 mp3 ⽂件,⽤来播放此 mp3 ⽂件。
    audio.src = "/webroot/help/5196.mp3";
    audio.loop = true;// 设置为循环播放
    document.body.appendChild(audio);// 将标签添加到⻚⾯上,否则⽆法播放。
    // 创建⼀个定时循环,周期为 2 秒
    const interval = setInterval(() => {
     // 获取fvs⻚⾯中名字叫 组件1 的组件
     const widget = duchamp.getWidgetByName("组件1");
     // 判断这个组件的参数abc 的值是否是⼤于100,如果⼤于100
     if (widget.getParameters("abc") > 100) {
     audio.play();// 开始播放
     clearInterval(interval);// 停⽌定时循环
     }
    }, 2000);


    附件列表


    主题: FineVis数据可视化
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

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

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

    不再提示

    10s后关闭

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