Axure 教程:用中繼器做排名圖
本文將教大家如何在axure用中繼器做一個排名圖,達到填寫中繼器數據,自動生成圖標的目的。
一、效果介紹
二、功能介紹
- 簡單填寫中繼器內容即可生成排名圖,無需連外網。
- 樣式顏色等可以自由變換。
- 鼠標移入時能顯示具體數據。
三、制作方法
(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協議
評論
原型預覽及下載地址:
https://axhub.im/pro/1882d0a30c3301c9
有什么辦法可以設置每個柱形顏色不一樣