上一期教會大家如何用axure做一個簡單的柱狀圖，本文將教大家如何用AXURE做堆疊柱狀圖。

效果如下：

一、功能介紹

1. 所有圖表不需要聯外網，數據也不是寫死的，只需在中繼器或表格中填寫數據即可自動生成圖表，操作簡單。
2. 大小、顏色、樣式、交互可以自由變換。
3. 鼠標移入時能顯示具體數據。

二、制作方法

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

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

（3）中繼器內表格設定

x是橫坐標的值，no是各種產品的值

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

LVAR2.height指矩形的高度，LVAR1指no的最大值，Item.no指no的當前值。

（5）具體交互思路

中繼器加載時，我們設置每個顏色柱狀的尺寸，具體設計方法請看上一遍文章。然后我們讓矩形2放在矩形1的上面，矩形3放在矩形2上面，以此類推。

（6）做一個標簽，如下圖所示，默認隱藏。

思路，鼠標移入矩形的時候，顯示標簽，標簽跟隨鼠標移動，讓Item.no的值=文本標簽2，Item.x的值=文本標簽1，以此類推。

鼠標移出的時候，隱藏標簽即可。

最后，制作完成后，以后使用方便，僅需簡單填寫中繼器的內容，即可擁有完美的效果，所以強烈推薦給各位使用。

本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議