本文將教大家如何用AXURE中的中繼器動態(tài)橫向堆疊圖

一、效果介紹

如圖：

預(yù)覽及下載：https://3ajwd3.axshare.com

二、功能介紹

簡單填寫中繼器內(nèi)容即可生成動態(tài)豎向堆疊圖

樣式顏色等可以自由變換。

鼠標(biāo)移入時顯示相應(yīng)的數(shù)據(jù)

三、制作方法

（1）中繼器

中繼器里有四列，d、y1、y2和y3，d為中坐標(biāo)，y1、y2和y3為具體數(shù)值如下圖所示：

2）中繼器內(nèi)材料組合：

四個個矩形，其中一個矩形顯示坐標(biāo)；另三個矩形要生成的條形圖，其尺寸設(shè)置為12*20，顏色為分別#0000FF，#FEA213，#54CD72，三個矩形按顏色順序疊放一起，

如下圖所示放置即可：

3）中繼器外文本

在中繼器外建一個矩形命名為文本并設(shè)置隱藏狀態(tài)，只用于顯示其具體數(shù)值，如圖：

最終制作效果，如圖

四、交互設(shè)置

（1）中繼器

中繼器每項加載時

（2）中繼器內(nèi)料組合

鼠標(biāo)移動時和鼠標(biāo)移出時

（3）中繼器外文本

鼠標(biāo)移出時

文本的字體顏色可調(diào)，點擊中繼器內(nèi)料組合，雙擊”設(shè)置文字“如圖

進(jìn)入，點擊”編輯文本“，便可以對字體顏色進(jìn)行設(shè)置，此時字體顏色為黑色，如圖：

本案例字體顏色為白色，其效果如圖：

這樣我們就完成動態(tài)橫向堆疊圖原型模板的制作了，以后使用時只需要在中繼器表格里填寫內(nèi)容即可