网格看板设计

2021-6-29

看板配置
分析

About 52 min

# 网格看板设计

数据看板可以很方便的把一系列的多个图表组合在一个页面展示;

注意

原有的社区版网格布局与时间线布局不再支持; 已经保存的网格布局可以用新的自由布局设计器打开;

点击顶部导航栏看板菜单, 进入看板管理模块(新版本不再有左边栏的看板罗列);
双击看板资源树里面的看板节点, 可以进入看板的编辑/查看页面;
选定任意文件夹右键点击可以新建/删除/重命名一个文件夹;

# 自由布局

新版自由布局与原网格布局的区别:
- 自由布局不再限制原来的行与列, 所有的组件独立置于画布之上, 自由调节宽度与高度;
- 自由布局新增任何组件(图表, 富文本, 看板参数, 图表联动配置)都可以直接在画布上展示与生效, 不需要切换页面预览;
自由布局与驾驶舱布局的区别
- 自由布局画布高度可以无限延伸展, 驾驶舱布局画布用于适应显示器全屏长宽比固定
- 自由布局的组件之间不能重叠, 驾驶舱的组件可以重叠, 驾驶舱支持的元素更加丰富可以任意组合与堆叠
- 自由布局看板可以导出与用于发送邮件, 驾驶舱只能用于在线监控与抉择

提示

功能区菜单顺序与图标样式在产品升级的过程当中会有一些细微调整, 以实际发布版本为准

自由布局功能区

# 布局宽度自适应^v1.5.1

网格布局拖拽宽度自适应，拖拽块与目标块重叠之后，以目标块为相对块计算右侧剩余空间

# 剩余列宽补齐

拖拽技巧

下面的演示中拖拽块与C块重叠之后触发自适应计算，拖动块右侧无其他方块，自动填满剩余宽度

# 夹缝列宽适应

拖拽技巧

下面的演示中B块与C块重叠之后触发自适应计算，拖动块右侧有其他方块，计算最大允许宽度，当剩余宽度少于1/4时不做适应

# 新建与打开

进入看板模块之后, 鼠标双击一个看板, 既可以打开看板进行查看与编辑;
为了区分自由布局看板与驾驶舱布局看板, 两者设定了不同的图标;
进入看板模块之后你也可以通过左边栏功能区菜单打开/切换到看板;

打开看板

# 添加图表

左侧菜单栏点击新建看板, 新版自由布局设计图表添加支持添加自助分析已保存图表或者内联式新建图表

# 已保存图表

左侧菜单栏图表->添加已保存图表, 弹出已保存图表列表, 双击图表节点即可将其添加到看板上, 然后用户根据自己的需求进行组件大小与位置调整
顶部看板名称呈蓝色状态表示当前为可编辑状态, 点击进入名称编辑状态修改看板名称

添加已保存图表

引用图表样式改变了看板上为什么没有生效

因为引用图加到看板的时候会复制一套加入时的配置, 这一次才能做到两个引用图可能在不同的看板做大量不同的配置，如果主图有更改，强行同步会导致原来两个地方做的更改白改，当然您可以手工同步引用图的样式

# 内嵌图表

引用图表的问题

从我们生产使用过程中与用户的实际反馈发现, 随着看板的增多, 图表的数据量会呈现急剧增长趋势;
起初为了图表可以在多个看板中重复引用, 特意把图表设计作为一个独立的模块维护与管理, 实际上这样的场景又非常的少见;
又或是用户在只需要发送仅包含一个图表的看板情况下不得不单独先设计与保存图表, 在看板废弃和删除之后, 还需要去图表管理模块找到对应图表手工删除;
另外, 由于看板与图表之间的权限是独立管理的; 在主题模块维护不太清晰的情况下经常会出现看板授权之后, 看板上的图表权限没有授权;

为了解决上述看板设计, 图表管理上的诸多不便, 在进行自由布局开发与改造的过程当中我们引入了新的看板设计模式内嵌图表; 图表定义数据直接保存在看板元数据中, 不在独立保存; 看板删除之后所有的数据一并被删除;

在引入内嵌图表之后, 原有的引用式的图表添加依旧可以正常使用;
内嵌图表的设计过程与原独立维护图表体验相同;
编辑与修改内嵌图表定义, 在看板实时实时生效;

添加内嵌图表

# 图表联动

图表联动联动与看板参数是看板与用户交互的两种主要形式, 新版本的图表联动从用户体验(设计与使用), 功能方面做了大量的改进与增强;

在可见即可得的自由布局设计下, 用户给图表添加联动定义之后不再需要像之前网格布局设计时反复的在设计与预览页面跳转切换;
联动定义参数不在依赖原始的数据集或查询字段, 而是更加自然的关联到模型的维度节点; 主动参数与被动参数更加直观与可理解;
允许用户联动到自定义维度节点;
一对多联动, 支持联动到数据集或者单个图表;
支持排除指定图表的关联;
主动关联与被动状态关联状态可见, 允许用户清除发出的主动关联;

图表联动到数据集

# 联动设计步骤

从图表右上角功能菜单进入图表联动设计卡片, 进入联动设计界面;
首先点击, 添加关联对象, 选择联动对象类型: 数据集/图表;
确定添加, 联动对象以标签页的形式出现在下方;
一个图表的点击事件可以关联到多个对象, 设计器下方一个标签页代表一个联动对象定义;
选择指定点击事件源字段: 源字段与图表设计的行维/列维相对应;
选择关联对象目标字段: 目标字段与目标对应的数据集或者 AD-HOC 查询相对应, 目标字段通过点击左侧模型树节点选择;
选定源字段与目标字段之后, 点击添加条件保存关联条件;
一次点击事件涉及多个维度信息, 用户可以添加其中一个或多个联动条件;
联动全局设置: 默认排除自身, 此外还可以选择排除其他的图表不响应联动时间;
添加完毕确认保存;

联动设计卡片

# 复杂报表联动事件定义(主动)

报表的点击事件是通过，目标单元格(单元格匹配-单元格排除)加单元格表达式(Expression)，来定义源点击事件信息

单元格定义语法

A1: A1单元格
A: A列所有单元格
1: 第1行所有单元格
A1,B,C: 多个匹配直接用英文逗号分隔

1
2
3
4

如下所示：

A4单元格: 取表达式dst1.group(the_year)的值传递给目标的年字段
B2单元格: 取表达式dst1.group(month_of_year)的值传递给目标的月字段

#号是最简单的表达式取值为取当前点击单元格的值

# 联动状态查看与清除

为了让用户了解当前看板数据是否有被联动过滤, 每个发出与接收到联动过滤的图表右上角都会显示状态图表;
可以取消主动发出的联动事件;

联动状态

# 图表事件联动到看板^v0.6

点击事件也可以联动到另外一个自由布局的看板
事件参数可以与被连接看板上的参数发生关联，被关联的看板参数类型只能是等值比较，不能是区间比较
也可以不指定参数关联

联动到看板

# 图表事件联动到外部 url^v0.6

点击事件可以跳转到任意外部链接
事件参数可以转化为 url 参数，参数别名可以自定义

联动到外部地址

# 图表事件联动弹窗图表^v1.0

点击事件在看板弹窗，可以用来显示不在看板上图表
如点击 KPI 弹出表格显示对应图表

操作流程

添加联动对象，选择外部弹窗

点击浏览，从图表目录树中选择需要关联的图表

在确认关闭关联对象窗口

在联动配置关联对象栏配置关联规则

选择源字段(来自源图表行列维度), 对于 KPI 指标卡之类没有行列维度在图上显示的可以选择常量

选择过滤类型

输入常量值

从左侧目标对应模型选择关联目标字段

添加条件

正确关联条件出现在关联条件目录卡之后，确认关闭联动配置窗口

弹窗联动

# 联动参数到环境变量^v1.1.1

关联到环境变量之后, 可以用于数据集和查询变量设置, 看板 API 动态请求参数, Query 变量赋值等

一次联动可以产生多个值, 因此添加联动对象窗口 key 值任意输入即可, 真正联动变量名与维度值关系板顶在联动对象编辑栏

联动数据到环境变量

# 多联动事件^v1.3.4

升级前点击联动事件只能区分下钻和联动，多个联动事件只能触发优先级最高的事件（比如联动到看板和数据集同时配置只能触发联动到看板），配置联动到多个看板，选取联动只能生效一个，升级后可以配置

联动到同类型多个对象,
联动到不同类型多个对象
通过弹层菜单让用户自由选择当前触发指定联动对象
支持配置联动别名(相同别名或者不配置别名能够同时触发)

# 联动区分行表头、列表头、数据

# 联动区分表头具体维度、数据部分具体指标

交叉表通过触发部位选择定位联动事件类型，实现点击行、列表头、不同指标列触发不同的联动事件

区分行维表头到具体列
区分列维表头到具体行
区分数据到具体指标
明细表联动区分到指定列
另外

只有单一联动的事件直接触发，不再出弹层，增加便捷性
精准联动样式显示，只有联动事件的列会增加下划线

# 编辑图表

内嵌图表和引用的已保存图表都可以编辑与修改;
内嵌图表点击标记直接修改, 页面不改变;
引用图表剪辑需要跳转图表编辑页面, 跳转编辑页之前请确认当前看板已修改内容均已保存, 否则未保存的修改数据会丢失;

编辑引用图表的, 因为如果该图表被多个看板引用, 修改之后会影响多个看板;

编辑图表

# 看板参数

企业版在原有通用过滤器的基础上新增了,

日期范围过滤,
日期
复选框
单选
下拉选框
范围查询
关键词搜索

多种类型看板参数

# 添加参数

看板参数关联对象可以是数据集或者单个图表
一个参数可以关联多个不同的数据集或图表

提示

推荐优先选择参数与数据集模型维度节点关联, 通过关联到数据集之后，数据集对应的所有图表都会与看板参数建立连接;

复选框可以设置最大与最小选择值

添加复选框看板参数

# 参数关联到环境变量^v1.1.1

关联到环境变量之后, 可以用于数据集和查询变量设置, 看板 API 动态请求参数, Query 变量赋值等

关联到环境变量

# 下拉框参数级联

参数级联常用于有上下层级关系的两个下拉框之间，上级下拉框参数值变更之后下级下拉框选项内容被上级选项限定，如: 国家->大区, 公司->部门

建立级联第一步是，在下级下拉框配置界面，打开级联开关，并选则级联上级参数

提示

当下级参数与正确的上级建立级联关系之后，仅代表上级变更，下级会刷新参数选项，并不代表下级能够利用上级的选项内容来限定选项

用户可以通过下面两种方式建立上下级选项直接的逻辑关系
2.1 方法1 上下级对应数据集中层级维度的上下级(后续的更新版本会尝试仅需要上下级在同一数据集即可建立逻辑关系)

维度层级

2.2 方法2 上级关联环境变量，下级开启可选值查询，并在查询脚本中使用上级绑定的环境变量

上级国家绑定到country变量

下级开启`可选值查询`

# 下拉框选项远程搜索

下拉框支持远程搜索使用场景，维度成员数量巨大超过阈值之后会被截断，远程搜索可以精确限定选项范围从而控制选项数量
维度字段上的远程搜索，自动通过字段like匹配,自动生成维度列查询如下：

SELECT sales_region -- 维度字段
  FROM (
 -- 数据集查询定义
) cb_view
    WHERE sales_region like '%we%'
  GROUP BY sales_region

1
2
3
4
5
6

您也可以在开启可选值查询中通过keywords内置变量自定义远程查询条件

# 我的常用参数组

在看板参数上的参数比较多或者值选择比较复杂的时候, 为了避免用户重复的选择设置看板参数, 用户可以保存当前看板参数状态值为常用参数组, 之后需要改变条件时一键恢复

保存的参数模板如果与当前看板上的参数不一致(模块保存之后, 某些参数被删除), 恢复参数组, 不会恢复被删除的参数

我的常用看板参数组

# 看板参数配置

打开参数变更实时生效之后，每次改变参数内容不需要点击查询直接刷新看板
参数名宽度默认为80px，在参数配置中可以批量调整
看板参数支持设置参数名称在上输入项上方，支持统一设置高宽

# ECharts标题支持变量^v1.10

标题支持变量, 包含联动信息、环境变量、维度信息

环境变量: ${envVars}
变量可以省略envVars前缀如：${year} == ${envVars.year}
联动信息: ${links}
列维度数组: ${groups}
行维度数组: ${keys}

1
2
3
4
5

在数据信息发生发生变化时，动态的变更标题

# 添加IFrame组件

# IFrame联动交互

iframe与看板联动交互

Iframe与看板直接可以通过postMessage消息机制交互，即iframe按约定格式发送消息，看板监听处理不同类别的消息， iframe支持的的消息格式如下:

# 环境变量

单个变量

window.parent.postMessage({
    name: 'ibi.widgetLink',
    params: [
        {type: 'env', val: {id: 'year', value: 2019}},
    ],
}, '*');

1
2
3
4
5
6

多个变量

window.parent.postMessage({
    name: 'ibi.widgetLink',
    params: [
        {type: 'env', val: {id: 'year', value: 2019}},
        {type: 'env', val: {id: 'month', value: 10}},
    ],
}, '*');

1
2
3
4
5
6
7

# 弹窗图

window.parent.postMessage({
    name: 'ibi.widgetLink',
    params: [
        {
            type: 'popup-widget', 
            targetId: 1, // 图表ID
            val: { alias: '年', column: 'the_year', type: "=", values: ['2016'] }
        },
    ],
}, '*');

1
2
3
4
5
6
7
8
9
10

# 数据集

window.parent.postMessage({
    name: 'ibi.widgetLink',
    params: [
        {
            type: "dataset", 
            targetId: 1, // 数据集ID
            val: { alias: '年', column: 'the_year', type: "=", values: ['2016'] }
        },
    ],
}, '*');

1
2
3
4
5
6
7
8
9
10

# 图表

window.parent.postMessage({
    name: 'ibi.widgetLink',
    params: [
        {
            type: "widget", 
            targetId: 'xp1lbw1j9cs', // 图表sid
            val: { alias: '年', column: 'the_year', type: "=", values: ['2016'] }
        },
    ],
}, '*');

1
2
3
4
5
6
7
8
9
10

# 看板分享

# 公开分享

看板分享可以把看板分享给没有 IBI 平台账号或者没有当前看板查看权限的其他人
分享链接可用于外部系统集成
分享权限为只读分享
分享状态暂时只包含看板默认设置过的参数值, 不包含联动与修改之后的参数
为了分享数据安全, 分享链接需要设置有效期

我的看板分享列表

添加一个分享

# 带参链接^v1.6.0

带参链接可以理解为私密分享，查看者能访问的链接保存了生成链接时的参数状态

该链接仅保存了链接生成时看板参数状态
访问该链接需要登录
访问者所见数据范围与其自身权限相关，查看者可能与您当前展示的数据范围不一致

# 看板导出

看板导出可选导出 Excel 和图片, Excel 形式导出对于表格组件有单独的工作表存储以便于用户二次与操作
新版本看板导出能够保持当前的看板参数状态与图表联动状态

案例看板监控

网格看板设计

# 网格看板设计

# 自由布局

# 布局宽度自适应v1.5.1

# 剩余列宽补齐

# 夹缝列宽适应

# 新建与打开

# 添加图表

# 已保存图表

# 内嵌图表

# 图表联动

# 联动设计步骤

# 复杂报表联动事件定义(主动)

# 联动状态查看与清除

# 图表事件联动到看板v0.6

# 图表事件联动到外部 urlv0.6

# 图表事件联动弹窗图表v1.0

# 联动参数到环境变量v1.1.1

# 多联动事件v1.3.4

# 联动区分行表头、列表头、数据

# 联动区分表头具体维度、数据部分具体指标

# 编辑图表

# 看板参数

# 添加参数

# 参数关联到环境变量v1.1.1

# 下拉框参数级联

# 下拉框选项远程搜索

# 我的常用参数组

# 看板参数配置

# ECharts标题支持变量v1.10

# 添加IFrame组件

# IFrame联动交互

# 环境变量

# 弹窗图

# 数据集

# 图表

# 看板分享

# 公开分享

# 带参链接v1.6.0

# 看板导出

Description

# 布局宽度自适应^v1.5.1

# 图表事件联动到看板^v0.6

# 图表事件联动到外部 url^v0.6

# 图表事件联动弹窗图表^v1.0

# 联动参数到环境变量^v1.1.1

# 多联动事件^v1.3.4

# 参数关联到环境变量^v1.1.1

# ECharts标题支持变量^v1.10

# 带参链接^v1.6.0