上一期教會(huì)大家如何用axure做一個(gè)簡(jiǎn)單的柱狀圖，本文將教大家如何用AXURE做堆疊柱狀圖。

效果如下：

一、功能介紹

1. 所有圖表不需要聯(lián)外網(wǎng)，數(shù)據(jù)也不是寫(xiě)死的，只需在中繼器或表格中填寫(xiě)數(shù)據(jù)即可自動(dòng)生成圖表，操作簡(jiǎn)單。
2. 大小、顏色、樣式、交互可以自由變換。
3. 鼠標(biāo)移入時(shí)能顯示具體數(shù)據(jù)。

二、制作方法

（1）先做出普通的柱形圖原件，具體制作方法參考我上一篇文章——Axure 教程：怎么做超漂亮的柱狀圖

（2）中繼器內(nèi)材料：矩形1，復(fù)制多個(gè)柱形圖里面的矩形，填充自己喜歡的顏色，放置于原來(lái)矩形一致的地方。

（3）中繼器內(nèi)表格設(shè)定

x是橫坐標(biāo)的值，no是各種產(chǎn)品的值

（4）在中繼器外建一個(gè)文本框（命名為最大值）并隱藏，只用于邏輯處理。文本框的值填寫(xiě)no里面最大的總值，該案例為980。邏輯是找到最高的總值，讓比它底的值調(diào)低高度。具體公式[[LVAR2.height*(Item.no/LVAR1)]]。

LVAR2.height指矩形的高度，LVAR1指no的最大值，Item.no指no的當(dāng)前值。

（5）具體交互思路

中繼器加載時(shí)，我們?cè)O(shè)置每個(gè)顏色柱狀的尺寸，具體設(shè)計(jì)方法請(qǐng)看上一遍文章。然后我們讓矩形2放在矩形1的上面，矩形3放在矩形2上面，以此類推。

（6）做一個(gè)標(biāo)簽，如下圖所示，默認(rèn)隱藏。

思路，鼠標(biāo)移入矩形的時(shí)候，顯示標(biāo)簽，標(biāo)簽跟隨鼠標(biāo)移動(dòng)，讓Item.no的值=文本標(biāo)簽2，Item.x的值=文本標(biāo)簽1，以此類推。

鼠標(biāo)移出的時(shí)候，隱藏標(biāo)簽即可。

最后，制作完成后，以后使用方便，僅需簡(jiǎn)單填寫(xiě)中繼器的內(nèi)容，即可擁有完美的效果，所以強(qiáng)烈推薦給各位使用。

本文由 @梓賢Vigo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議