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關注咱們，隨時分享新知識新技能。