之前的文章Axure教程：可視化視圖和大家分享了怎樣用中繼器來制作圖表。后來有粉絲問我可不可以用中繼器做成動(dòng)態(tài)的圖表。所以現(xiàn)在作者就教大家怎么用axure來制作動(dòng)態(tài)圖表，今天先來制作排名圖。

這個(gè)原型制作完成之后，使用很簡(jiǎn)單，只需要填寫中繼器表格既可以了。喜歡、想要該原型的伙伴或者有很多問題的小朋友都可以在評(píng)論給我留言哦。

效果演示

1. 自動(dòng)輪播效果

2. 點(diǎn)擊選擇效果

使用說明

如下圖填寫“數(shù)據(jù)中繼器”的表格即可。

第一行column1-10為標(biāo)題，填寫完之后，可以自動(dòng)填寫到下拉列表。

• no列不需要修改
• text為縱坐標(biāo)，例如廣東省、江蘇省……
• column1-10，除了第一行外，其他填寫數(shù)據(jù)即可。

另外，還有兩個(gè)文本框需要填寫：

• “邏輯最大值”：即中繼器表格數(shù)據(jù)里面的最大值。
• “條形最大長(zhǎng)度”：即條形最大值的寬度，案例中為600，用于運(yùn)算各個(gè)數(shù)據(jù)的條形的長(zhǎng)度。

制作方法

（1）制作動(dòng)態(tài)面板

材料10個(gè)text文本框，10個(gè)條形，10個(gè)number文本框，如下圖擺放。

（2）制作下拉列表

如下圖所示制作下拉列表，按鈕1-10組成組合按鈕組，點(diǎn)擊下拉列表是顯示按鈕組，點(diǎn)擊按鈕或空白地方隱藏按鈕組。

（3）制作中繼器

如下圖所示制作中繼器，只需要填寫好表格即可，中繼器只是做邏輯處理。

（4）中繼器交互

每項(xiàng)加載時(shí)：

• 如果no=0，設(shè)置按鈕1=item.column1；……；按鈕10=item.column10
• 如果no=1，設(shè)置text1=item.text；……如果no=10，設(shè)置text10=item.text

（5）按鈕的交互

點(diǎn)擊按鈕1時(shí)，設(shè)置number1=no1行的column1值；……；number1=no10行的column1值。

設(shè)置條形1和text1的尺寸=number1*系數(shù)，系數(shù)=條形最大長(zhǎng)度/邏輯最大值，動(dòng)畫為線性；

設(shè)置上下移動(dòng)：這里需要對(duì)中繼器進(jìn)行排序（按column1的降序排列），排列之后，找到no1的index序號(hào)。例如如果no1的序號(hào)為1，證明他還是排在第一，no1的序號(hào)為2，證明已經(jīng)跌到第二了。所以我們移動(dòng)text1、條形1、text1的組合，這里注意要移動(dòng)到絕對(duì)位置，x=0，y=(no1的序號(hào)-1)*組合的高度，記得動(dòng)畫也是線性。

其余案例同樣思路完成。到這里恭喜你已經(jīng)完成了點(diǎn)擊選擇的動(dòng)態(tài)效果了。

（6）自動(dòng)播放

這個(gè)其實(shí)很簡(jiǎn)單，鼠標(biāo)單擊按鈕時(shí)，先等待動(dòng)畫時(shí)間結(jié)束，再觸發(fā)點(diǎn)擊下一個(gè)按鈕，如此類推就可以了。

本期分享就到此結(jié)束了，喜歡、想要的該原型的伙伴或者有很多問題的小朋友都可以在評(píng)論給我留言哦。

本文由 @梓賢Vigo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于CC0協(xié)議