上次我们讲了看板与弹窗的设置,这次我们来讲讲如何不用弹窗的方式进行切换展示?
和看板与弹窗一样,在这里我们也需要对响应的图表进行设置,即可得到我们想要的效果。
但是在这里,我们需要明白两个概念,是“事件”与“响应”。通常鼠标或用户左击的动作我们称之为“事件(Event)”,而对事件进行处理的函数,我们称之为“响应(EventHandler)”。
所以我们在图上的交互行为,其实都会触发事件与响应。根据交互规则的设置,我们可以组合出千变万化的图表交互形式。
Part1
简单的图表交互
在星河可视化平台中,“事件”的触发方式有“点击”与“悬停”两种形式。而响应方式有
“显示”
、
“隐藏”
与
“显隐切换”
三种形式。
有了以上几种事件与响应的方式,我们就可以灵活对图表的交互行为进行组合。
比如我们在看板中,对一个图标进行“事件”设置,设置为“点击”形式,并命名为“1”。接着我们对一个图表进行“响应”设置,在事件名称中对应选择“1”,响应形式为“显隐切换”。具体操作如下:
设置完以上“事件”与“响应”机制后,我们可以来看看效果:
另外,值得一提的是,在看板最开始时,两边的帷幕是逐渐退出画面的。这是怎么做到的呢?
这里涉及到了“响应”→“事件名称”里的“看板加载完成时”与“自定义”的两个概念。在以上的例子中,我们都是使用“自定义”的形式来命名(比如刚刚就命名“1”)。如果选择“看板加载完成时”触发响应,那么我们就可以不用设置相关的“事件”规则。
以舞台幕布为例,我们对“图片”设置以下“响应”规则,就可以得到幕布退出看板的效果。
Part2
进阶的图表交互
可以看出,上述图表的交互的设置与应用都是非常简单的。接下来我们将要学习设置更高一阶的图表交互形式:动态面板的切换设置。
在文章的开头,我们展示了不用弹窗的方式进行切换展示,是怎么做到的呢?
首先我们需要,制作一个动态面板。在左侧图表库中找到“交互”一栏并拖到面板中,双击动态面板进入其中进行设置。
再把第一个面板配置好后,点击左上角的“状态”,添加“状态”配置第二个面板。
在两个面板都配置好后,我们按照前面的“事件”与“响应”的逻辑设置,把“图标”和“状态”联系起来。具体操作如下:
1.把“图标一”设置为“事件一”,把“图标二”设置为“事件二”。
2.对动态面板进行“响应”设置,“响应一”对应“事件一”,并在行为中选择“状态切换”,在“状态切换”中选择“状态1”。“响应二”设置同上。
完成相关设置后,点击“图标一”我们就可以切换到“状态1”,点击“图标二”即可切换到“状态2”,效果如下:
Part3
高阶的图表交互
图标因为没有数据结构,所以总得来说交互逻辑设计的还是比较简单。那假如我们以有数据的图表呢?如何在STARiver平台上设计灵活复杂的图表交互功能?以饼图为例,我们对饼图进行“事件”设置和“条件”设置。在事件设置中,我们把“事件名称”设置为“1”,在条件设置中,我们增加过滤条件,在“地区”上选择“北京”。
接着,我们可以再添加一个事件,并命名为“2”,在增加过滤条件时,可以试试其他规则。
在这里,我们使用“≠”逻辑,地区同样选择北京。这样,我们就完成两个事件的逻辑设置。一个是“事件一”=“地区北京”,一个是“事件二”≠“地区北京”。
同样的,我们对动态面板设置“响应”逻辑,“响应一”对应“事件一”,展示“状态1”。“响应二”对应“事件二”,展示“状态2”。于是我们就能得到以下效果:
值得一提的是,在条件过滤器当中,我们可以通过增加过滤条件,设置各种条件以此来进行各种逻辑的数据过滤:
通过以上的“事件”与“响应”机制设置,我们就可以灵活组合各种图表交互,你get到STARiver平台强大与便利了吗?