本文將教大家如何在axure用中繼器做一個(gè)排名圖，達(dá)到填寫中繼器數(shù)據(jù)，自動(dòng)生成圖標(biāo)的目的。

一、效果介紹

二、功能介紹

1. 簡(jiǎn)單填寫中繼器內(nèi)容即可生成排名圖，無(wú)需連外網(wǎng)。
2. 樣式顏色等可以自由變換。
3. 鼠標(biāo)移入時(shí)能顯示具體數(shù)據(jù)。

三、制作方法

（1）中繼器里有兩列，x和no，x為中坐標(biāo)，no為具體數(shù)值如下圖所示：

（2）中繼器內(nèi)材料：文本框+矩形1，如下圖所示放置即可：

（3）在中繼器外建一個(gè)文本框(命名為最大值)并隱藏，只用于邏輯處理。文本框的值填寫no里面最大的值，該案例為920。邏輯是找到最長(zhǎng)的矩形的值，讓比它短的矩形值調(diào)低寬度。具體公式[[LVAR2.width*(Item.no/LVAR1)]]。

LVAR2.width指矩形的寬，LVAR1指no的最大值，Item.no指no的當(dāng)前值。

（4）具體交互

中繼器每項(xiàng)加載時(shí)，是設(shè)置中繼器內(nèi)的文本框的文字=[[Item.x]]設(shè)置矩形的尺寸[[LVAR2.width*(Item.no/LVAR1)]]，錨點(diǎn)在左部。

（5）用矩形和標(biāo)簽制作外框并標(biāo)上刻度，如下圖所示：

將中繼器移動(dòng)到對(duì)應(yīng)位置上即可。

（6）做一個(gè)標(biāo)簽，如下圖所示，默認(rèn)隱藏，透明度75%。

思路，鼠標(biāo)移入矩形的時(shí)候，顯示標(biāo)簽，標(biāo)簽跟隨鼠標(biāo)移動(dòng)，讓Item.no的值=文本標(biāo)簽2，Item.x的值=文本標(biāo)簽1。

鼠標(biāo)移出的時(shí)候，隱藏標(biāo)簽即可。

這樣制作完成了排名圖，以后使用方便，僅需簡(jiǎn)單填寫中繼器的內(nèi)容，即可擁有完美的效果，所以強(qiáng)烈推薦給各位使用。

需要原型的小伙伴們可以在評(píng)論留言哦，謝謝大家！

在線演示地址：https://www.pmdaniu.com

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

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