FEA动态交互你知多少？

上期微刊中小编将FEA主要分为4代，就如文章中所描述的目前大部分使用者还集中在第二代全景大屏，对于第三代可动态交互大屏是知其然不知其因此然。因此本期小编将针对如何实现数据动态交互这个问题进行解答。经过实际案例数据告诉你们如何在有限空间下实现数据的动态交互增长展现维度丰富大屏效果。

1. 数据准备阶段

在接下来的操做介绍中咱们将以某段时间内的网站监测数据为基础进行数据的交互展现。咱们知道数据可视化可能90%的工做在于数据的清洗转化，因此为了节省你们的时间咱们在这里省略数据清洗部分，仅展现清洗后的数据。有兴趣的朋友能够关注FEA官方公众号：openfea获取原始数据，以根据我的喜爱自选字段自选维度进行可视化展现。主屏数据以下：

联动数据以下：

2.原理介绍阶段

FEA经常使用交互方式主要有三种类型：第一种：三列式交互。主要是在数据表最后加上pageid、cs、target 三列，还可经过增长width、height列来控制交互效果的宽高等。其中pageid指定要跳转到哪一个面板，例如跳转到动态面板页面，dashboard2:500。cs用来传递参数给面板。例如传递杭州市，@city=杭州市,其中city表示参数名。target指定用什么方式来实现交互，主要有上弹（up)、下钻(top)、打开新页面(blank)、主从联动(link)。

每列都在其中扮演着不可替代的角色。在pageid列中经过指定面板，保证在交互时能找到须要交互的面板ID。在cs列经过加入参数列，保证用户在触发交互按钮时能准确的将须要联动面板中的数据进行一对一的展现，避免的数据的错位不匹配问题。在target列中经过指定方式的形式保证交互效果的一致性。

采用该种方式的图形有折线图、饼图、柱状图、柱线图、渐变柱线图、横向排名图、地图热力、无图例地图热力、地图热力散点图、地图热力迁徙图、双路线迁徙图、图片框、有图热点、无图热点、实时路线图等图形。

第二种：配置界面交互。主要在面板利用配置页面的交互功能来实现交互效果。其基本思想仍是和三列式交互同样，利用pageid、cs、target三列来实现交互，只不过是界面化了。

第三种：超级链接交互。主要经过原语增长link连接列，也能够设置位置，宽高。基本格式： a = add link by ("<a  nh=dashboard2:ww4&@date="+a.date+" targett=top role=600x400>"+a.date+"</a>")   其中：”<a nh=跳转到的目标页面&传递的参数  targett=跳转方式 role=弹窗宽度x高度>”+显示的内容+”</a>”。

采用该种方式的图形有跑马灯、排名表、信息块、分页表格、表格、HTML文本框、信息块305、信息块305、小标题、大标题等图形。

三、实际操做阶段

实现方法1：三列式交互。为实现交互效果，首先构建主图页面1：dashboard3:course。并在key值中加入特有的三列，主图key值以下：

 由上图可看到主图中联动的面板为NEW面板course_up，交互方式为上弹up，同时须要实现的交互效果为在点击国家区域时显示国家攻击详情，因此在key值中加入的cs参数列为world列的数据，以保证在页面在点击具体国家区域时会弹出对应国家详情。可是弹出的详情数据是如何获得的？这就利用了循环思想，利用循环，遍历计算每一个国家需展现的联动数据。其实在实际项目中若是交互的数据较少，相比较循环手动计算可能更为便捷，但如果十几甚至是二十个，循环固然是最佳的方式。

以下即为主脚本，主脚本的做用一方面是计算主图中地图的数据，另外一方面是引出循环，保证主图中的全部参数均可以遍历到被循环脚本。

以下即为被循环脚本，在被循环脚本中主要是带着参数计算须要交互展现的页面数据。经过主脚本中依次传递过来的参数计算交互界面的值并存储为key。

主图构建以下：数据中加入特有三列

从图构建以下：key值的参数化与面板默认参数值的添加，因为此处的key值已经被参数化，加入参数的默认值“@world=美国”将会默认显示“course_world_up_美国”的数据。

只要主图中需交互的每一个数据都在循环中获得了惟一结果集与之对应，保存并预览后便可获得交互效果。

实现方法2：配置界面交互。因为界面式交互方式更节省时间，因此逐渐成为主流。只要掌握了列式交互方式则界面式交互方式更容易理解。相比列式交互方式界面化的交互只是将原语中须要添加的三列修改成在面板的高级参数的交互栏中。如上的例子，只需创造简单的key后在高级参数的交互中，点击并开启，在页面、参数、交互方式中进行上述相同的配置便可达到一样的效果以下就是在dashboard3:course的配置状况：

实现方法3：超级链接交互。因为交互的原理还是以第一种为依据这里就再也不一一介绍。有兴趣的朋友能够本身动手试一试。有任何问题，能够在下方留言，会有专业的分析师为你解答。

四、总结阶段

不管什么方式的交互，主要由3部分组成，第一部分是主图，须要最早展现的可视化视图，第二部分是从图，便是想额外展现的部分，第三部分就是主图与从图的桥梁循环。主图利用循环将每一个具体的值经过foreach循环遍历计算各个值并将获得的结果参数化。循环的具体实现方法就是在主脚本中添加一个循环语句foreach让它带着参数去执行被循环脚本并以参数造成保存key值以确保每一个值都有惟一对应的key与之匹配。在FEA中全部的动态交互实现流程都是以下图所示：

其中的B环节利用foreach计算交互数据的原理以下：

 若是屏幕前的你认真看完本期中关于动态交互的介绍，作到以下效果的大屏将是so easy！好了，关于数据交互这块若是还有疑惑，能够搜索公众号openfea关注咱们，随时分享新知识新技能。