反馈已提交

网络繁忙

FVS显示隐藏组件事件

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

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

    1.1 版本

    报表服务器版本插件版本功能变动
    11.0.22V2.3.0

    「交互>点击事件」新增显示/隐藏事件,无需通过 JS 即可实现显示隐藏组件

    1.2 应用场景

    FVS 模板在 V2.3.0 之前的版本中,要实现 组件的显示隐藏 需通过 JavaScript 事件实现,设置及后续维护较为繁琐。

    V2.3.0 版本新增「显示/隐藏」点击事件,通过简单配置即可实现组件显示、隐藏或切换显示/隐藏。

    E5A97666-F415-490C-91A8-D2A7A5230C9F.GIF

    2. 功能介绍

    所有支持点击事件的二维组件,均支持「显示/隐藏」事件。添加后可控制目标对象的显示或隐藏。

    • 事件名称不支持为空,同一组件的事件不支持重名;

    • 支持添加多条对象;

    • 目标对象支持搜索筛选组件,支持多选组件;

    • 交互动作支持三种类型:显示、隐藏或切换显示/隐藏。

    Snag_b43c30a.png

    3. 示例

    3.1 新建模板

    点击设计器左上角「文件>新建可视化看板」,新建一个空白看板。如下图所示:

    1696926492272814.png

    3.2 添加组件

    添加 标题组件 用于设置点击交互事件,用于被隐藏或显示的组件可随意添加。

    本例添加了一个柱形图、一个饼图和一个折线图,以及三个图片组件作为标题组件的背景,可自定义修改组件名称。

    最终效果如下图所示:

    Snag_b581976.png

    在初始状态,我们需要将希望隐藏的组件,手动设置为不可见状态。如下图所示:

    ED2F714A-300A-4245-9AA3-2A8D7CECEC98.GIF

    3.3 设置显示隐藏事件

    选中「柱形图」标题,点击「交互>点击事件>添加点击事件>显示/隐藏」。

    自定义事件名称,目标对象及交互动作设置如下:

    目标对象
    交互动作
    柱形图、柱形图标题背景显示
    饼图、折线图、饼图标题背景、折线图标题背景隐藏

    Snag_b6ee779.png

    同理设置另外两个标题组件的事件,选择对应标题要实现显示或隐藏的目标对象即可,这里不再赘述。

    3.4 效果预览

    3.4.1 PC 端

    点击模板右上角「预览」,效果下图所示:

    04C38025-C324-4868-9B47-444DE3539E7C.GIF

    3.4.2 移动端

    移动端请自行组合组件并开启 重布局 ,预览方式请参考 FVS移动端预览 ,效果如下图所示:

    EF3D1706-EB2D-4515-8B61-900354266700.GIF

    4. 模板下载

    点击下载模板:FVS显示隐藏组件事件.fvs

    附件列表


    主题: FineVis数据可视化
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

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

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

    不再提示

    10s后关闭

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