历史版本14 :仪表板自适应 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

FineBI 版本功能变动
6.0.7-
6.0.13仪表板自适应悬浮球效果优化
6.0.16

新增参数限制仪表板预览缩放下限和上限,详情见第 5 节

1.2 应用场景

用户在制作好仪表板给其他人查看的时候,经常遇到由于不同屏幕分辨率、长宽比、大小屏幕切换、浏览器缩放等问题导致仪表板变形或者显示不全等问题。

例如:

  • 文本组件在不同分辨率电脑中的显示会有比较大的差异

  • 表格换行后仍然不能显示所有内容等

此时可以通过「自适应」设置调整仪表板显示状态。

1.3 功能简介

制作好仪表板后,可以在仪表板编辑界面设置「自适应」的效果。如下图所示:

2023-01-13_14-19-56.png


功能说明
编辑时的基准尺寸
  • 仪表板编辑时,进行仪表板的尺寸配置

  • 支持两种尺寸配置:自动(默认)、固定大小

预览时的适应规则
  • 仪表板预览时(目录、分析主题预览、仪表板预览),自适应的规则

  • 预览时的适应规则选项会跟随编辑时的基准尺寸的设置项变化

  • 可以在仪表板编辑界面预设置,也可以在预览界面再次修改(预览时修改不会保存)

预览时的适应规则选项会跟随编辑时的基准尺寸的设置项变化详情。如下表所示:

编辑时基准尺寸
预览时的适应规则逻辑说明推荐使用场景
自动(默认)

▎布局及内容缩放(默认)

▎布局缩放

1)编辑和预览时,仪表板内容永远会双向自动撑满浏览器窗口

2)预览时的缩放比例也是根据查看者浏览器窗口尺寸和最近一次编辑仪表板的浏览器窗口尺寸来计算的


基础分析场景——侧重于查看数据特征,快速分析


制作一个仪表板多人编辑或查看时,不会强调像素级别的视觉效果差异,仪表板内部不出现截断,内部元素整体显示效果和谐即可


固定大小

▎原始尺寸(默认)

▎宽度适应:保证左右不留白或者出滚动条

▎高度适应:保证上下不留白或者出滚动条

▎屏幕适应:编辑仪表板时的一屏内容预览时也能够一屏显示

1)编辑仪表板时会给订一个固定的仪表板尺寸,用户可调,不同人编辑该仪表板基准尺寸不会发生变化

2)预览时会保证仪表板的长宽比不变,根据不同的预览自适应方式显示


进行向上汇报制作固定驾驶舱的场景,甚至部分公司对该类场景很重视且有一定的UI规范


此类可能为了满足视觉效果叠加了许多悬浮组件,编辑者制作看板后,由于对视觉细节要求较高,多人查看或编辑时希望仪表板内部元素相对位置和尺寸都保持不变,表格以及图表内显示的数据条数和制作时也要保持一致,以达到编辑时的最佳视觉效果



1.4 注意事项

  • IE11浏览器不支持该功能。

  • 默认情况下,编辑时基准尺寸为自动,预览时规则为布局及内容缩放

  • 预览时适应规则的设置,只有预览仪表板才能看到效果。

编辑时基准尺寸预览时的适应规则注意事项

自动(默认)

▎布局及内容缩放(默认)

▎布局缩放

1)悬浮组件:在自动模式下无法解决悬浮组件叠加在组件上的相对位置问题

2)表格留白:由于会铺满预览时的屏幕,所以不同预览窗口,组件的长宽比例可能会和编辑时不一致,所以可能会表格留白

3)显示滚动条:为保证基础分析场景文字显示效果,缩放最小和最大比例有限制。若缩放比例太大表格和过滤组件可能还是会出现滚动条

固定大小

▎原始尺寸(默认)

▎宽度适应:保证左右不留白或者出滚动条

▎高度适应:保证上下不留白或者出滚动条

▎屏幕适应:编辑仪表板时的一屏内容预览时也能够一屏显示

页面留白:保证了长宽比,不同预览窗口页面可能会留白(留白效果会和仪表板风格保持一致)

2. 自动编辑

默认情况下,编辑时的基准尺寸为「自动」,预览时的适应规则为「布局及内容缩放」。

若修改为「布局缩放」,如下图所示:

2023-02-02_10-45-53.png

「布局缩放」效果如下图所示:

2023-02-02_10-49-09.png

若设置「布局及内容缩放」后。如下图所示:

「布局及内容缩放」:编辑时基准尺寸屏幕中的内容横向和纵向都会撑满屏幕,模版中的内容元素基于当前预览时的屏幕尺寸和基准尺寸计算出比例,进行缩放显示。

2023-02-02_10-49-30.png

3. 固定大小编辑

编辑设置仪表板的默认自适应效果为「固定大小」,选择一个适合自己电脑分辨率的尺寸(支撑自定义)。默认的预览时的适应规则为「原始尺寸」。如下图所示:

2023-02-02_17-35-46.png

进入预览界面查看效果。如下图所示:

2023-02-02_17-35-23.png


4. 自适应悬浮球编辑

当用户需要使用其他仪表板内容时,会使用Web组件插入公共链接。

BI6.0.13版本及之后当鼠标悬浮到对应的Web组件上,会显示仪表板的自适应悬浮球,点击调整自适应效果,如下图所示:

未将鼠标悬浮至组件时,不显示自适应悬浮球。

2023-08-08_11-26-33.png

5. 限制仪表板预览缩放范围编辑

FineBI支持通过 fine_conf_entity可视化配置 插件修改BI仪表板预览缩放的上下限。

参数名
参数描述参数值
SystemOptimizationConfig.scaleLowerLimitBI仪表板预览缩放下限

参数值需为非负双精度浮点

默认值为0.7

SystemOptimizationConfig.scaleUpperLimitBI仪表板预览缩放上限

参数值需为非负双精度浮点

默认值为1.5

2023-12-20_14-41-32.png