反馈已提交

网络繁忙

FVS扩展组件

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

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

    1.1 版本

    报表服务器版本插件版本
    11.0.22V2.7.1

    1.2 应用场景

    「扩展组件」结合标题组件或富文本组件的 动态值 功能,可根据数据集字段动态生成一系列指标卡,每个指标卡展示不同的数据。

    E88B84D4-2952-416B-844B-D07F85B043FE.GIF

    1.3 功能简介

    「扩展组件」是一种容器,当前仅支持拖入「标题、富文本和图片」三种组件以及由这三种组件组成的组合。

    拖入组件后,根据「扩展依据」进行扩展(扩展依据必须是动态值中的字段来源),实现快速生成多个组件。

    注:本文仅为大家介绍「扩展组件」特有功能,其他属性不赘述。

    扩展组件不支持组件交互事件。

    组件动画请参见FVS组件动画 。

    组件属性请参见FVS组件样式属性 。

    2. 功能介绍

    2.1 添加扩展组件

    点击或拖拽组件区「容器>扩展组件」,即可将扩展组件添加到画布中。

    Snag_7716de3e.png

    2.2 扩展模板

    扩展组件中存在一个预设的「扩展模板」,用于承载组件/组合。

    一个扩展组件仅有一个「扩展模板」,不支持增加,删除即连同扩展组件一起删除。

    1)拖入组件/组合规则如下:

    • 仅支持拖入标题、富文本、图片组件,以及这三种组件组成的组合。

    • 直接拖拽组件区或页面中组件/组合到「扩展模板」上方,出现提示「释放进入扩展模板」时松开鼠标即可。

    • 拖入组件/组合时,组件/组合大小不变。

    • 释放时,组件位置若超出扩展模板左/上边界,则组件拖入后自动对齐左/上边界;其余位置则以组件释放位置为准。

    • 若组件超出扩展模板右/下边界,则截断显示。

    如下图所示:

    AC477E84-DBC7-416C-B3A6-98583B18CBAA.GIF

    • 也支持在组件图层列表中,拖拽组件图层顺序移入扩展模板,组件位置默认在扩展模板中心位置。如下图所示:

    3521DBDE-4B96-47F2-BED0-B7C1DFEB9F97.GIF

    2)移出组件/组合方式如下:

    • 直接拖拽组件到扩展组件外,出现提示「释放移出扩展模板」时松开鼠标即可。此时移出的组件位置以释放位置为准。

    • 在组件图层列表或扩展组件列表中,直接拖拽组件图层顺序移出扩展组件层级即可。此时移出的组件位置保持不变。

    • 在扩展组件列表中,悬浮组件,点击「更多>移出」即可 。此时移出的组件默认显示在扩展组件右侧。

    如下图所示:

    A1AFCDA7-7E27-4DB3-ADBC-F51FF3A977FA.GIF

    3)「扩展模板」支持设置名称、大小。启用调整锁定时,调整扩展模板大小,内部组件大小也会等比例变化。

    注:扩展模板拖拽大小仅支持从右/下方拖拽。

    89A74205-EA9C-419C-982A-AF90F00DCB4E.GIF

    2.3 扩展组件内容设置

    扩展组件支持设置布局方式、组件间距和扩展依据。

    1)布局方式:支持选择「固定列数」或「固定行数」,根据「扩展模板」大小显示,超出扩展组件大小时,可滚动查看。

    2)组件间距:支持分别设置「行距」和「列距」。

    3)扩展依据:

    • 提供基于当前扩展组件内「动态值」来源表作为选择;若当前扩展组件没有可用的数据集,提示暂无数据。

    • 设置扩展依据后,根据数据集的数据条数定义扩展的组件数量,含有该数据集的动态值,根据扩展顺序依次按行取值。

    • 无动态值或动态值为公式的组件,扩展时内容不变;动态值为数据集字段,但不符合扩展依据的组件,按照扩展的组件数量依次取值。

    • 设置过扩展依据,即使后续扩展组件内不再包含该依据,之前设置的扩展也不受影响,直到重新选择扩展依据。

    注:扩展出的组件没有实体,但仍然继承扩展模板内组件的所有交互能力。

    Snag_19a538e6.png

    3. 示例

    3.1 新建模板

    1)在 FineReport 设计器左上角点击「文件>新建可视化看板」。

    2)在「创建空白看板」Tab 中,可自定义模板名称、画布大小,以及选择模板样式。

    3)点击「创建看板」。

    1715081259976750.png

    3.2 准备数据

    添加数据库查询 ds1,输入 SQL 查询语句:SELECT 产品,sum(销量) as 销量 FROM 销量 group by 产品

    SQL 的意思为:按照产品分组,求出每个产品的销量总和,然后返回每个产品的名称以及该产品的销量总和。

    Snag_77894ed0.png

    3.3 设计指标卡

    3.3.1 制作指标卡背景

    1)点击组件区「媒体>图片」,将图片组件添加到画布中。

    2)将下面这张图片另存到本地。

    指标卡背景.png

    3)选中图片组件,图片类型选择「自定义上传」,上传保存的图片,选择该图片作为指标卡背景。

    Snag_7788a86e.png

    3.3.2 设置产品名称动态值

    1)点击组件区「文字>标题」,将标题组件添加到画布中,根据指标卡背景设置合适的位置和大小。

    2)标题内容选择「动态值」,点击「编辑动态值」按钮,弹出「编辑动态值」界面。

    3)动态值来源为「数据集」,选择 ds1 数据集,产品字段。

    4)点击「确定」完成编辑。根据实际情况自行设置内容样式,例如字体、颜色等等。

    Snag_776eaace.png

    3.3.3 设置产品销量动态值

    1)复制粘贴 3.3.2 节设置好的标题组件,点击「编辑动态值」,弹出「编辑动态值」界面。

    2)将字段修改为「销量」。

    3)添加「条件样式」,点击「条件设置」,设置条件为「值小于字符串 2000」,点击「确定」。

    4)条件样式修改颜色为红色。最后点击「确定」。

    Snag_77753a9d.png

    3.3.4 组合组件

    在画布中框选制作好的组件,点击画布上方工具栏的「组合」按钮,将其组合为一个分组。

    44F71D55-0740-4B99-8F44-22A64E808CFF.GIF

    3.4 设置指标卡扩展

    1)点击组件区「容器>扩展组件」,将扩展组件添加到画布中。

    2)选中组合,拖入扩展组件的「扩展模板」中。

    3)选中「扩展模板」,根据内容调节模板大小。

    1C42F7E5-BD38-45DC-BD02-70DF14E1AE18.GIF

    4)选中「扩展组件」,布局方式为固定列数 2 列,扩展依据选择数据集 ds1 。

    此时可以看到扩展出了 5 个不同内容的指标卡,且产品销量小于 2000 时,值显示为红色。

    Snag_77866eca.png

    3.5 效果预览

    3.5.1 PC 端

    保存模板,点击「预览」。效果如下图所示:

    Snag_1a548695.png

    3.5.2 移动端

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

    Snag_1a5d56fe.png

    4. 模板下载

    点击下载模板:FVS实现扩展指标卡.fvs

    附件列表


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

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

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

    不再提示

    10s后关闭

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