橫向動(dòng)態(tài)堆疊圖能夠直觀地展示數(shù)據(jù)的情況，是一種常用的數(shù)據(jù)分析方式。本文分享了如何用AXURE中的中繼器制作橫向動(dòng)態(tài)堆疊圖，一起來(lái)看看吧。

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

一、效果介紹

如圖：

預(yù)覽地址：https://3ajwd3.axshare.com

二、功能介紹

簡(jiǎn)單填寫(xiě)中繼器內(nèi)容即可生成動(dòng)態(tài)豎向堆疊圖。

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

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

三、制作方法

1）中繼器

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

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

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

如下圖所示放置即可：

3）中繼器外文本

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

最終制作效果，如圖：

四、交互設(shè)置

1）中繼器

中繼器每項(xiàng)加載時(shí)：

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

鼠標(biāo)移動(dòng)時(shí)和鼠標(biāo)移出時(shí)：

3）中繼器外文本

鼠標(biāo)移出時(shí)：

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

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

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

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