本文介绍开关组件的使用指南。
组件概述
开关是一种控件组件,仿照物理开关,单击即可切换为开启或关闭状态。可通过交互配置,与其他组件配合使用,实现控制相关内容的显隐、不同状态的呈现等。
使用场景
常用于在可视化应用中,通过定义开关的开启或关闭状态,来控制显示或隐藏指定内容。例如,可通过开关控制启用/禁用声音,显示/隐藏侧边栏配置等。
效果展示
静态开关
交互场景
前提条件
添加开关
登录DataV控制台。
在工作台页面的数据看板区域,鼠标悬停至目标看板,单击编辑,进入看板的画布编辑页面。
在左侧导航栏的
列表下,单击开关组件,添加该组件至画布。
您也可使用全局搜索添加相关组件。
接入业务数据
添加组件后,您可将已准备的业务数据接入组件进行显示。单击开关,在右侧的数据源页签,即可选择该组件所要呈现的数据。
开关接收的数据字段介绍如下。
字段
说明
onValue
打开开关抛出的数值,默认为1。
offValue
关闭开关抛出的数值,默认为0。
state
开关的打开或关闭状态。该参数值仅支持配置为
onValue
或offValue
的值,默认为0或1,0表示关闭开关,1表示打开开关。示例开关的数据结构及效果展示如下。
//打开开关 [ { "onValue": 1, "offValue": 0, "state": 1 } ] //关闭开关 [ { "onValue": 1, "offValue": 0, "state": 0 } ]
数据源的核心配置项介绍如下。
配置项
描述
选择数据源
支持接入CSV文件、API、各类数据库等多种类型数据,详情请参见支持的数据源类型。您可使用可视化表格或代码方式编辑数据字段。
配置过滤器(可选)
用于自定义过滤代码,实现数据的结构转换、筛选、展示和简单的计算,详情请参见管理数据过滤器。
配置数据映射
用于将所选数据源中的字段映射至组件对应的字段上,实现数据的实时匹配。单击
图标可配置字段样式。
查看响应结果
用于实时展示组件所接入的数据。当组件数据源发生变化时,此处会对应展示最新数据。
单击数据响应结果,可查看编写的数据字段代码。
单击查看示例,可查看数据源接收的数组类型及代码示例。您可参考示例编写相关字段。
其他数据请求配置:
禁止加载态:勾选后,在组件更新或预览数据看板时,将不呈现组件初始化时的加载内容。
受控模式:勾选后,组件在初始化状态下不会请求数据。此时仅支持通过蓝图编辑器或全局变量事件发起数据请求。
自动更新请求:勾选后,平台会根据您设置的轮询时间,动态轮询更新数据;不勾选,则需手动刷新页面,或通过蓝图编辑器和全局变量事件来触发请求更新数据。
配置开关
单击开关组件,即可在右侧面板配置组件的基础样式、全局变量和交互事件等高级配置,以及蓝图交互配置。
样式配置
在样式面板,可配置开关的默认状态、背景颜色、边框样式,相关配置项介绍如下。
您也可单击图标,通过关键词搜索,快速定位到所需配置项,搜索支持模糊匹配。详情请参见搜索配置项。
相关配置项介绍如下。
配置项 | 描述 | 图示 |
全局配置 | 定义组件在数据看板中的位置分布、透明程度、交互穿透。
| |
基础样式配置 | 定义开关的默认选中状态、背景颜色及边框的线条、颜色、粗细、圆角等样式。相关说明如下:
| |
开关把手配置 | 定义开关把手的颜色、边框样式、宽度、高度,以及垂直方向的位置偏移。通常使用开关把手控制开关的打开及关闭。 |
高级配置
可定义开关与其他组件间的交互。相关配置项介绍如下。
配置项 | 描述 | 图示 |
交互事件 | 定义与其他组件间的交互行为,实现组件联动。单击 | |
关联全局变量 | 可在组件中关联全局参数,实现组件间的参数传递,进行组件交互。单击 当开关的状态变化时(即打开或关闭开关),触发数据请求,抛出数据源面板中的配置值。打开开关,抛出 |
蓝图交互
可通过蓝图编辑器使用可视化连线方式,定义组件间的交互关系及行为逻辑。
操作步骤
在画布编辑页面,单击顶部菜单栏左侧的
图标,进入蓝图编辑器。
在图层节点列表,鼠标悬停至开关组件,单击
图标,添加该组件至主画布。
通过连线方式,按需配置相关组件的蓝图交互效果。
示例如下。