物可视IOTVIZ

    组件之间的协同工作

    物可视的仪表盘以“组件”为单位构建。组件包括图表,形状,文字等等许多种类,但大体上可以分为两种:

    1. 展示类 - 纯粹地展示数据,如图表,形状,文字等。物可视绝大部分的组件都是这一类。
    2. 交互类 - 通过承受用户的交互来实现一些动态效果,如按钮,下拉框,按钮组等。这是物可视新增的一类组件,也是为了丰富仪表盘效果的新的探索。

    在交互组件中,除了链接组件通过输入目标页面的地址即可运行之外,如下拉框和按钮组都应当会和仪表盘中的其他组件产生协同工作的问题。一个可能的效果如下:

    images

    在这个效果中,下拉框和按钮组在切换时都能够“通知”其他组件自身的变化。其他组件接受到信息后做出适当的变化,如文字组件的内容变化,以及圆形形状的显示与隐藏(圆形在选项值等于 c 时会隐藏)。而这两个交互组件之间也会互相影响,既是写入,也是读取。

    本文的主要内容就是讲解如何使用物可视实现这个效果,我们称之为组件和数据源的双向绑定

    新建公告板数据源

    我们想象有两个人,并且规定他们之间不能说话。那么他们应当如何沟通呢?一个简单的办法是找来一张纸,一个人写,一个人读。同样的道理,在物可视中因为组件之间是互相独立的,那么要让组件能够沟通,就必须有一个媒介来扮演那张纸的角色。这个媒介就是“公告板数据源”,是一种新类型的数据源。虽然名为数据,但实际上它并不产生数据,而是和它的名字一样,起到的作用是一个公告板

    1. 在仪表盘的数据 Tab 新建数据表,选择”公告板“类型,如下图:

      image.png

    2. 下方的简表中初始状况有一行数据。在默认情况下,物可视的下拉框和按钮组两个组件都有 3 个选项,值分别是 a, b, c。因此我们以 a 作为初始值。右侧的说明可以填写一些有意义的文字说明,例如我们填写了“下拉”,表示这一行给下拉框使用。

      image.png

      这里额外说明一点,一个公告板的每一行可以给一组组件使用,并不局限于 2 个。例如一个组件负责写,多个组件负责读也是合理的。但如果是不同意义的值应该分开成多行。例如 Tab 使用第一行,Select 使用第二行等等。我们的例子中所有组件都是一组,因此只使用一行就够了。

    3. 点击下一步,能看到一个预览数据。一切正常即可确认创建。

      image.png

      注意:公告板数据源不能添加后续的 pipeline 处理,如”增加列“,”重命名列“等等。

    至此公告板数据源就创建完成了,相当于给两个人写字用的纸已经准备完成了。接下来我们要分别把纸给到他们手里,也就是下一步的数据绑定。

    组件的双向数据绑定

    数据绑定在物可视并不是一个新的概念,但是在现在我们需要对这个概念进行一些扩充。原先的数据绑定都是组件实时从数据源读取数据,因此我们可以称之为读取绑定。而现在需要组件在承受交互时能够写入数据,因此我们称之为写入绑定。如果一个组件的同一个属性既有读取又有写入,那么我们就可以称之为双向绑定

    回想刚开始的例子,只关注左侧的下拉框。当下拉框被改变时,它写入数据,让其他组件读取;而当其他组件(按钮组)被改变时,下拉框又去读取这个变化,从而让自己自动变化。这就是对“当前值”这个属性的写入加读取,也就是双向绑定。

    为了适应数据绑定的概念扩充,现在点击组件的“数据绑定”页能够看到两种图标,从而区分读取和写入,如下图:

    image.png

    上方链条形状的图标是读取绑定,等价于原先的回形针图标。而最后一个铅笔的图标,是写入绑定。如上所述,下拉组件同时需要使用两者,因此我们两处都要配置。

    1. 读取绑定部分,使用方式和原先完全相同。把当前值绑定到公告板的第一行 data 列即可。

      image.png

      注意:不要选错到 comment 列。

    2. 写入绑定部分,点击后展开的对话框中选择公告板。(写入绑定只能选择公告板类型的数据源,不能选择其他类型,所以得先创建公告板数据源。)

      image.png

      因为只有一行,就选中这一行即可。选择时不区分选择 data 列还是 comment 列,最终都会是 data 列生效。

    至此两个方向的绑定均已完成。

    公告板在设计器中也会更新

    在设计器中,为了编辑效果,需要确保组件的稳定(如位置,隐藏/展示,大小等),因此虽然组件和数据源有读取绑定关系,但在设计器中组件并不会实时读取并变化属性。

    但是公告板的数据更新是由用户交互触发的,也就是说是可控的。再者,例如下拉或者切换 Tab 时某些组件显示而某些组件隐藏的情况,在设计器中也应当有预览方法。因此,针对公告板的写入和读取都能够在设计器中实时体现出来。在设计器中双击组件,可以进入交互模式。之后通过下拉或者切换按钮组,就可以预览到整个仪表盘的变化。

    需要额外注意的是,在设计器中切换影响到公告板的数据。举例来说,如果公告板上初始数据为 a,在确定写入绑定关系后,当下拉框切换到第二项时,公告板数据就会变成 b。而其他类型的数据源(如静态 JSON)在设计器中不会改变数据本身。

    上一篇
    离线模式实践
    下一篇
    产品定价