Axure教程-橫向動態堆疊圖(中繼器)
橫向動態堆疊圖能夠直觀地展示數據的情況,是一種常用的數據分析方式。本文分享了如何用AXURE中的中繼器制作橫向動態堆疊圖,一起來看看吧。
本文將教大家如何用AXURE中的中繼器動態橫向堆疊圖。
一、效果介紹
如圖:
預覽地址:https://3ajwd3.axshare.com
二、功能介紹
簡單填寫中繼器內容即可生成動態豎向堆疊圖。
樣式顏色等可以自由變換。
鼠標移入時顯示相應的數據。
三、制作方法
1)中繼器
中繼器里有四列,d、y1、y2和y3,d為中坐標,y1、y2和y3為具體數值如下圖所示:
2)中繼器內材料組合
四個個矩形,其中一個矩形顯示坐標;另三個矩形要生成的條形圖,其尺寸設置為12*20,顏色為分別#0000FF,#FEA213,#54CD72,三個矩形按顏色順序疊放一起,
如下圖所示放置即可:
3)中繼器外文本
在中繼器外建一個矩形命名為文本并設置隱藏狀態,只用于顯示其具體數值,如圖:
最終制作效果,如圖:
四、交互設置
1)中繼器
中繼器每項加載時:
2)中繼器內料組合
鼠標移動時和鼠標移出時:
3)中繼器外文本
鼠標移出時:
文本的字體顏色可調,點擊中繼器內料組合,雙擊“設置文字”如圖:
進入,點擊“編輯文本”,便可以對字體顏色進行設置,此時字體顏色為黑色,如圖:
本案例字體顏色為白色,其效果如圖:
這樣我們就完成動態橫向堆疊圖原型模板的制作了,以后使用時只需要在中繼器表格里填寫內容即可。
本文由@產品纖纖 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 unsplash,基于 CC0 協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
評論
- 目前還沒評論,等你發揮!