下拉筛选框
所有文档

          物联网数据可视化

          下拉筛选框

          概述

          下拉筛选框是一种交互组件,可用于在多个选项中选择一项。用户可以通过公告板数据源写入绑定,或者在集成代码的监听事件中得到更改的数据,来实现可视元件之间的协同工作。

          image.png 图片

          特有属性设置

          除了每个组件都拥有的常规静态属性(X, Y, 宽,高,字体等属性)之外,下拉筛选框主要还有如下几类配置项。

          输入框

          image.png

          输入框指的是图中用红框圈出的部分,展示了当前选中的选项。它的特有配置项有以下这些:

          属性名称 描述 类型
          文字-当前值 当前选中的选项值,注意这个值应与选项中的值对应起来。如果绑定数据的话则这个配置项不生效 string
          文字-缩进 输入框和下拉框中文字的缩进 number
          背景框-背景 输入框的背景色,可选纯色或者渐变色 color
          背景框-圆角 输入框的圆角 number
          背景框-边框 输入框的边框颜色 color
          背景框-边框悬浮 鼠标悬浮时输入框的边框颜色 color
          背景框-阴影 是否开启输入框阴影设置 boolean
          背景框-阴影-边框内 阴影在边框内/外扩散 boolean
          背景框-阴影-X 阴影的X偏移量 number
          背景框-阴影-Y 阴影的Y偏移量 number
          背景框-阴影-R-模糊半径 阴影的模糊半径 number
          背景框-阴影-R-扩展半径 阴影的扩展半径 number
          箭头样式-显示箭头 是否显示下拉箭头 boolean
          箭头样式-颜色 箭头颜色设置 color
          箭头样式-大小 箭头图标的大小 number
          箭头样式-偏移量 箭头距离右侧的边距 number

          下拉框

          image.png

          下拉框指的是图中用红框圈出的部分,展示了所有选项标签。它的特有配置项有以下这些:

          属性名称 描述 类型
          下拉选项 可以点击右侧的“垃圾桶”图标和“添加”图标来删除或者新增下拉选项。每条选项需要填写值及其对应的标签。需要注意多个选项的值是唯一的,不能重复。如果绑定数据的话则这个配置项不生效。 array<{value: string; label: string;}>
          最大高度 下拉框展示的最大高度,如果内容超出高度,则可以滚动查看 number
          边框 下拉框的样式设置,可参考【输入框】中背景框的设置 --
          选项-高度 每个选项的高度 number
          选项-字体颜色-悬浮 选项在鼠标悬浮上去时的字体颜色 color
          选项-字体颜色-选中 选项在选中时的字体颜色 color
          选项-选项背景 每条选项所在行的背景颜色 color
          选项-选项背景-悬浮 选项在鼠标悬浮上去时的背景颜色 color
          选项-选项背景-选中 选项在选中时的背景颜色 color

          数据绑定

          数据绑定,是连接『可视化仪表盘』与『数据表』的窗口。数据绑定标签中可供选择的数据表,是已在数据标签中创建好的二维数据表。数据表的创建过程可参考 仪表盘数据表处理最佳实践文档。

          下拉选项

          image.png

          • 数据表:【必填】单选,可选择已创建的数据表。
          • 值:【必填】单选,可选择string类型的数据。
          • 标签:【必填】单选,可选择string类型的数据。

          示例数据

          示例数据表如下: 新建静态数据,选择CSV格式,复制下面这段内容到CSV文本输入框中:

          value,label
          a,选项A
          b,选项B
          c,选项C

          当前值

          string类型,【单值】绑定,可参考仪表盘数据绑定

          注意

          1. 将当前值与选项中的值对应起来。
          2. 与下拉选项绑定不同的数据表。

          交互

          在设计器页面,可以双击元件进入元件交互;在运行或者分享页面,可以直接与元件进行交互。通过公告板数据源写绑定PlayerAPI监听事件,均能实现可视元件间的协同工作。详情如下:

          写绑定

          在文档 组件之间的协同工作 中详细说明了实现组件间协同的操作方法。在下拉筛选框元件中,通过对当前值属性添加写绑定,可以达到如下效果:

          下拉交互

          PlayerAPI监听事件

          交互事件的监听可以通过物可视PlayerAPI中的 onWidgetDOMEvent API。

          事件名称 描述 监听函数
          onload 页面加载后抛出选项当前值的初始值 (value: string) => void;
          onValueChange 切换选项后抛出选项的当前值 (value: string) => void;
          上一篇
          iframe
          下一篇
          按钮标签