本文將教大家如何在axure用中繼器做一個排名圖，達到填寫中繼器數據，自動生成圖標的目的。

一、效果介紹

二、功能介紹

1. 簡單填寫中繼器內容即可生成排名圖，無需連外網。
2. 樣式顏色等可以自由變換。
3. 鼠標移入時能顯示具體數據。

三、制作方法

（1）中繼器里有兩列，x和no，x為中坐標，no為具體數值如下圖所示：

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

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

LVAR2.width指矩形的寬，LVAR1指no的最大值，Item.no指no的當前值。

（4）具體交互

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

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

將中繼器移動到對應位置上即可。

（6）做一個標簽，如下圖所示，默認隱藏，透明度75%。

思路，鼠標移入矩形的時候，顯示標簽，標簽跟隨鼠標移動，讓Item.no的值=文本標簽2，Item.x的值=文本標簽1。

鼠標移出的時候，隱藏標簽即可。

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

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

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

本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議