反馈已提交

网络繁忙

JS实现FVS组件的隐藏或显示

  • 文档创建者:Alicehyy
  • 历史版本:10
  • 最近更新:Alicehyy 于 2024-06-18
  • 1. 概述

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

    1.1 版本

    报表服务器版本插件版本功能变动
    11.0.6V1.8.0

    所有组件均支持 setVisible、isVisible 接口,可通过 JS 实现对当前页面上组件的隐藏或显示

    1.2 应用场景

    FVS 模板中通常使用 轮播器组件 实现多个组件/组合的切换展示,但是轮播器的样式或者功能在某些场景下存在限制。

    这时我们可以通过 JS 实现预览时手动控制组件的隐藏或显示,预期效果下图所示:

    97B484B0-39FF-46E3-A42E-94F00857D419.GIF

    1.3 实现方式

     通过 setVisible 接口,使用 JavaScript 事件实现。JavaScript 代码示例如下:

    注1:仅支持 V1.8.0 及之后的插件。

    注2:该接口仅对当前页面组件或组合有效。

    duchamp.getWidgetByName("组件名称").setVisible(false); //true 表示设置为可见,false 表示设置为不可见

    2. 示例

    2.1 新建模板

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

    1696926492272814.png

    2.2 设计组件

    添加 标题组件 用于设置点击事件,用于被隐藏或显示的组件可随意添加,本例添加了一个柱形图、一个饼图和一个折线图。

    将几个图表重叠在一起,分别设置标题组件的内容为「柱形图、饼图、折线图」,在「组件」面板中可修改组件名称。

    点击画布左下角按钮展开「组件图层」列表。如下图所示:

    Snag_182604a.png

    每一个页面的每一个组件都占用一个组件图层。鼠标悬浮于组件对象时,左侧出现一个 Snag_184d8ec.png 图标,表示组件为可见状态;点击图标可切换为 Snag_184dff0.png 不可见状态,不可见图标会固定显示。

    本例将饼图和折线图设置为「不可见」,如下图所示:

    387BB6AB-07D4-49DF-AD0C-5E571050AA65.GIF

    2.3 设置 JavaScript 事件

    1)选中「柱形图」标题,点击「交互>点击事件>添加点击事件>JavaScript」。

    输入事件名称,输入 JavaScript 脚本:

    duchamp.getWidgetByName("柱形图").setVisible(true); //设置柱形图可见
    duchamp.getWidgetByName("饼图").setVisible(false); //设置饼图不可见
    duchamp.getWidgetByName("折线图").setVisible(false); //设置折线图不可见

    步骤如下图所示:

    Snag_18abd39.png

    2)同理设置另外两个标题组件的 JavaScript 事件:

    • 饼图:

    duchamp.getWidgetByName("饼图").setVisible(true); //设置饼图可见
    duchamp.getWidgetByName("柱形图").setVisible(false); //设置柱形图不可见
    duchamp.getWidgetByName("折线图").setVisible(false); //设置折线图不可见
    • 折线图:

    duchamp.getWidgetByName("折线图").setVisible(true); //设置折线图可见
    duchamp.getWidgetByName("饼图").setVisible(false); //设置饼图不可见
    duchamp.getWidgetByName("柱形图").setVisible(false); //设置柱形图不可见

    3)同时选中多个组件,单击鼠标右键,右键点击「组合」即可将组件组合在一起。如下图所示:

    注:此步骤是为了让移动端的标题组件和PC端的标题组件一致。

    2.4 效果预览

    2.4.1 PC 端

    点击右上角「预览」。预览效果如 1.2 节预期效果所示。

    2.4.2 移动端

    预览方式请参考 FVS移动端预览 ,效果如下图所示:

    3. 模板下载

    附件列表


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

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

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

    不再提示

    10s后关闭



    AI

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