之前的文章Axure教程：可視化視圖和大家分享了怎樣用中繼器來製作圖表。後來有粉絲問我可不可以用中繼器做成動態的圖表。所以現在作者就教大家怎麼用axure來製作動態圖表，今天先來製作排名圖。
這個原型製作完成之後，使用很簡單，只需要填寫中繼器表格既可以了。喜歡、想要該原型的夥伴或者有很多問題的小朋友都可以在評論給我留言哦。
效果演示
1. 自動輪播效果
2. 點擊選擇效果
使用說明
如下圖填寫“數據中繼器”的表格即可。
第一行column1-10為標題，填寫完之後，可以自動填寫到下拉列表。
- no列不需要修改
- text為縱座標，例如廣東省、江蘇省……
- column1-10，除了第一行外，其他填寫數據即可。
另外，還有兩個文本框需要填寫：
- “邏輯最大值”：即中繼器表格數據裡面的最大值。
- “條形最大長度”：即條形最大值的寬度，案例中為600，用於運算各個數據的條形的長度。
製作方法
（1）製作動態面板
材料10個text文本框，10個條形，10個number文本框，如下圖擺放。
（2）製作下拉列表
如下圖所示製作下拉列表，按鈕1-10組成組合按鈕組，點擊下拉列表是顯示按鈕組，點擊按鈕或空白地方隱藏按鈕組。
（3）製作中繼器
如下圖所示製作中繼器，只需要填寫好表格即可，中繼器只是做邏輯處理。
（4）中繼器交互
每項加載時：
- 如果no=0，設置按鈕1=item.column1；……；按鈕10=item.column10
- 如果no=1，設置text1=item.text；……如果no=10，設置text10=item.text
（5）按鈕的交互
點擊按鈕1時，設置number1=no1行的column1值；……；number1=no10行的column1值。
設置條形1和text1的尺寸=number1*係數，係數=條形最大長度/邏輯最大值，動畫為線性；
設置上下移動：這裡需要對中繼器進行排序（按column1的降序排列），排列之後，找到no1的index序號。例如如果no1的序號為1，證明他還是排在第一，no1的序號為2，證明已經跌到第二了。所以我們移動text1、條形1、text1的組合，這裡注意要移動到絕對位置，x=0，y=(no1的序號-1)*組合的高度，記得動畫也是線性。
其餘案例同樣思路完成。到這裡恭喜你已經完成了點擊選擇的動態效果了。
（6）自動播放
這個其實很簡單，鼠標單擊按鈕時，先等待動畫時間結束，再觸發點擊下一個按鈕，如此類推就可以了。
本期分享就到此結束了，喜歡、想要的該原型的夥伴或者有很多問題的小朋友都可以在評論給我留言哦。
題圖來自 Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
