本文將教大家如何用AXURE做一個超漂亮的柱狀圖。

原型預覽及下載地址：

https://axhub.im/pro/1882d0a30c3301c9

一、效果介紹

二、功能介紹

1. 簡單填寫中繼器內容即可生成柱狀圖，無需連外網。

2. 樣式可以自由變換，原型內提供6中常用且美觀的顏色，也可以自定義。

3. 滑鼠移入時能顯示具體資料。

三、製作方法

1. 中繼器裡有兩列，x和no，x為橫座標，no為具體數值如下圖所示：

2. 中繼器內材料：文字框+矩形1，如下圖所示放置即可：

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

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

4. 具體互動

中繼器每項載入時，是設定中繼器內的文字框的文字=[[Item.x]]

設定矩形的尺寸[[LVAR2.height*(Item.no/LVAR1)]]，錨點在底部。

這是，基本上一級完成了樹狀圖。

5. 製作外框並標上刻度，如下圖所示：

將中繼器移動到對應位置上即可。

6. 做一個標籤，如下圖所示，預設隱藏。

思路，滑鼠移入矩形的時候，顯示標籤，標籤跟隨滑鼠移動，讓Item.no的值=文字標籤2，Item.x的值=文字標籤1。

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

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