组件传参联动

<< Click to Display Table of Contents >>

当前位置:  可视化数据计算和交互分析 > 数据处理与分析 > 交互分析 

组件传参联动

复制链接

1. 概述

1.1 应用场景

组件传参联动功能适用于多个不同数据源的组件间数据联动的场景。该功能允许用户在操作一个组件(如表格、图表等)时,同步更新其他组件的显示内容,实现数据的动态筛选和展示。例如点击表格中的“花茶”,不同数据源的图表上只显示花茶的数据。

1.2 功能简介

组件传参联动功能通过添加组件间的参数传递操作,实现操作一个组件时自动修改其他组件的参数值,从而触发数据联动。当这些参数值被其他组件用于数据过滤时,即可在组件间实现数据的实时同步和联动。该功能不仅支持同源图表间的数据联动,也支持非同源图表间的参数过滤和交互效果,极大地增强了数据分析的灵活性和交互性。

2. 应用举例

例如我们有以下报告,包含图表1和图表2(表格),想要点击表格里面任意“市场分布”列值,同步显示对应柱图标记。

dataprocess_linkage_transferparameter4_zoom68

操作步骤如下:

1)点击制作报告顶部菜单【参数 > 组件传参】,选择添加操作。配置操作为“选中”,源组件为“图表2”,数据列选择“市场分布”,传递参数输入“a”。

dataprocess_linkage_transferparameter5_zoom85

2)给图表1设置过滤条件

鼠标移入图表1,点击右上角的“添加过滤”按钮,设置过滤条件“市场分布是等于?{a}”。

dataprocess_linkage_transferparameter6_zoom85

3)选中图表2的“市场分布”列值,点击图表外空白区域可以取消选中,恢复原始状态,查看效果。

dataprocess_linkage_transferparameter1_zoom74

3. 功能说明

3.1 功能入口

点击顶部菜单栏【参数 > 组件传参】,在弹出的“组件传参”弹窗中点击“添加”按钮进行配置:

3.2 配置说明

1)在弹出的“组件传参”弹窗中点击“添加”按钮进行配置。

dataprocess_linkage_transferparameter2_zoom67

2)点击“添加”按钮后,在“添加操作”弹窗可以设置组件传参属性。

dataprocess_linkage_transferparameter5_zoom85

【名称】用户可以自定义组件传参操作的名称,以便于理解和识别。

【操作】定义触发组件传参的操作方式,默认为“无”。不同操作方式的含义如下,

“无”:自动传递当前图表内的值。

“笔刷联动”:表示传递笔刷位置的值给参数。

“选中”:表示传递单击选中数据列位置的值给参数。

【源组件】默认为“全部”,也可选当前报表所绑定的任意一个数据集,选择后,下方列表展示该数据集所对应的组件。

【数据列】在勾选组件后,数据列展示勾选组件上绑定的数据字段。勾选多个组件时,只可以选择组件都绑定过的字段。

【传递参数】组件传参的目标参数,可以选择已有参数,也可以自定义输入参数名,自动新建参数。

【未选中时清空参数】该选项默认勾选,表示当用户未选中任何组件或数据区域时,会自动清空之前传递的参数。若用户希望保留之前选中的维度值进行多层参数传递,可取消勾选该选项。

说明:

支持ctrl选中或笔刷联动多个数据,传递多个参数值。

图表类、3D模型如果开启了轮播,支持在轮播时自动传递参数完成组件联动,详情参考下文4.2轮播时触发组件传参章节内容

4. 其他典型场景

4.1 多层传参过滤

多层传参过滤可实现连续选中多个组件的特定项,依次传递参数到后续组件,保留传递的参数值。

例如我们有以下报告,包含图表1、图表2、图表3,希望在下面的报告中实现选中图表1中的市场分布的值,传递参数到图表2,再选中图表2中的省份的值,传递参数到图表3,实现多层过滤,即点击图表2时,可以保留图表1上传递的参数值。

dataprocess_linkage_transferparameter_eg2_zoom80

操作步骤如下:

1)点击顶部菜单【参数 > 组件传参】,进入“组件传参”的对话框。

2)点击右上角的图表新建图标,进入“添加操作”的对话框,操作名称设置为“操作-0”,操作在下拉选项中选择“选中”,取消勾选“未选中时清空参数”,实现多层筛选,勾选上“图表1”,数据列、传递参数在下拉选项中均选择“市场分布”。

dataprocess_linkage_transferparameter_eg2_operationsettings1_zoom80

3)点击右上角的图表新建图标,进入“添加操作”的对话框,操作名称设置为“操作-1”,操作在下拉选项中选择“选中”,取消勾选“未选中时清空参数”,勾选上“图表2”,数据列、传递参数在下拉选项中均选择“省份”。

dataprocess_linkage_transferparameter_eg2_operationsettins2_zoom80

4)选中图表1的二级市场下的西部市场,再选中图表2上的四川。

dataprocess_linkage_transferparameter_eg2_result_zoom48

4.2 轮播时触发组件传参

4.2.1 图表轮播

报告内有一个柱状图(图表1)、一个表格(图表2),图表1绑定了“市场分布”,“销量”,图表2绑定了“省份”,“销量”,想在图表1自动轮播过程中,图表2只显示该市场分布下的省份数据。

dataprocess_linkage_transferparameter6_zoom80

操作步骤如下:

1)添加一个组件传参,选中图表1的柱子时传递参数?{市场分布},并将该参数添加到图表2的过滤器里面,过滤条件为“市场分布是等于?{市场分布}”。

dataprocess_linkage_transferparameter7_zoom80

dataprocess_linkage_transferparameter8_zoom60

2)选中图表1,在右侧【设置 > 动画】勾选“轮播”,然后勾选“轮播时触发组件传参”。

dataprocess_linkage_transferparameter9_zoom80

3)预览时,可以看到轮播传参效果:

dataprocess_linkage_transferparameter9_zoom80

4.2.2 3D模型轮播

报告内有一个3D模型(图表3)、一个表格(图表4),模型绑定了“模型名称”,表格绑定了“节点”,“产量”,“报废数量”,想在图表3自动轮播过程中,图表4只显示该设备模型对应的节点生产数据。

dataprocess_linkage_transferparameter10_zoom60

操作步骤如下:

1)添加一个组件传参,选中图表3的设备模型时传递参数?{模型名称},并将该参数添加到图表4的过滤器里面,过滤条件为“模型名称是等于?{模型名称}”。

dataprocess_linkage_transferparameter11_zoom80

dataprocess_linkage_transferparameter12_zoom60

2)选中图表3,在右侧【设置 > 动画】勾选“轮播”,动画类型选择“模型轮播”,轮播对象选择“按绑定模型名称”,此时只会轮播数据里面包含的模型,然后勾选“轮播时触发组件传参”

dataprocess_linkage_transferparameter13_zoom80

3)预览时,可以看到轮播传参效果。

说明:

只有组件传参里面的操作为“选中”时,开启轮播后勾选“轮播时触发组件传参”才能看到自动传参效果。