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

效果如下：

一、功能介紹

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

二、制作方法

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

（2）中繼器內(nèi)材料：矩形n個(gè)，組合需要多少個(gè)就復(fù)制多少個(gè)柱形圖，填充自己喜歡的顏色。放置如下圖所示。

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

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

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

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

（5）設(shè)置尺寸，和前文Axure 教程：怎么做超漂亮的柱狀圖一致。

（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)單填寫中繼器的內(nèi)容，即可擁有完美的效果，所以強(qiáng)烈推薦給各位使用。

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

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