可视化控件属性来源

概要

可视化控件是用户可以直接从左侧控件面板选中拖拽到画布上的组件,每个组件都有配套的属性(Prop)设置。当组件处于选中状态时,右侧属性检查面板会显示当前选中组件所有可配置的属性和数据绑定属性。
以“记分牌”组件为例,

image.png

属性配置

image.png

绑定设置

image.png

仪表盘使用中,可视化控件属性的当前值控制着控件的行为和视觉样式,按照设值的方式不同,属性值有三种来源:

  • 通过属性面板在设计时确定。
  • 通过绑定数据表,由数据表的数据变化驱动。(注:数据绑定方式数据驱动的结果需要在 “运行模式”下体现。)
  • 通过Player运行时API设置。

当属性只允许通过属性面板设值时,该属性被称为静态属性,因为其值在运行时不能更改。当属性允许通过数据表绑定或通过Player运行时API设值时,该属性被称为动态属性,设计时通过属性面板确定的值将做为运行时的初始值。由于动态属性允许数据绑定或API直接设值,因此需要知道该属性所接受的值的数据格式是什么,否则非法的设值将被忽略。具体可视化控件的动态属性定义请参考各控件的文档

注:当动态属性的运行时值来源是数据表绑定时,通过API设置的值将被忽略。

属性类型和数据格式

目前开放的属性类型如下表所示:

key 数据类型 格式定义 说明
color string CSS Color Value 支持通过rgba, rgb, hsl的方式指定颜色,或者transparent指定全透明,也接受WebSafe的命名颜色
input string 长度为0~200的字符串 只支持单行文本
float float javascript支持的浮点数值格式
switcher boolean javascript支持boolean值 true 或 false
dataTable object 形如{headers: [{name:STRING, type:'string' l'number' l'boolean' l 'date'}], data: [[...],...]}的对象,其中headers字段包含列的定义,包括列名(name)和列值的类型(string, number, boolean, date),data字段是二维数组包,每一项为描述一行数据的一维数组(数据类型需与对应的列值类型声明匹配) 描述二维的表格数据,目前用于数据表格控件的运行时接口