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

本文將教大家如何用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)，點(diǎn)擊中繼器內(nèi)料組合，雙擊“設(shè)置文字”如圖：

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

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

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