柱狀圖的使用在分析平臺(tái)很常見，作為產(chǎn)品在設(shè)計(jì)此類分析統(tǒng)計(jì)平臺(tái)的時(shí)候，常常面臨找不到合適的圖表元件的情況，又或是找到了合適的圖表元件，元件本身又比較偏靜態(tài)，需要花一些時(shí)間去做適當(dāng)?shù)男薷?。本文主要介紹了如何利用中繼器制作一類可以靈活變幻的柱狀圖，包括增、刪柱狀條，修改各柱狀條的值以及高度~

效果展示：

效果體驗(yàn)：https://9ovt9x.axshare.com

操作分析

1. 首先，此柱狀圖默認(rèn)顯示三個(gè)柱狀條，點(diǎn)擊修改柱狀條上面的數(shù)字、柱狀條下面的自定義字段，然后點(diǎn)擊柱狀條觸發(fā)修改自身高度以及保存上面的值和下面的自定義字段的事件。（只有點(diǎn)擊柱狀條，上下信息才能修改成功?。?/li>
2. 點(diǎn)擊柱狀圖下面的“行+1”按鈕，柱狀條會(huì)自動(dòng)加+1。
3. 右擊，彈出刪除按鈕，刪除不需要的柱狀條。（由于Axure8.0的bug，預(yù)覽時(shí)，右擊的時(shí)候會(huì)出現(xiàn)瀏覽器的相關(guān)彈框，這里我們就先忽略這個(gè)啦~）

關(guān)鍵因素

中繼器的使用

操作步驟

準(zhǔn)備階段

1. 首先，打開你的Axure，然后往工作區(qū)拖入一個(gè)中繼器，取名為list，雙擊中繼器，進(jìn)入中繼器的編輯頁(yè)面。
2. 在中繼器的編輯頁(yè)面，取消中繼器的邊框，設(shè)置寬高為59*311（這個(gè)可自定義了~），x=0，y=0。
3. 拖入一根水平線段，兩根垂直線段，做成底部欄。
4. 拖入一個(gè)矩形，取名為rect，取消邊框，設(shè)置寬高為37*170（可自定義~），填充藍(lán)色，陰影，放置在底部水平線段之上。如下圖所示。
5. 拖入兩個(gè)文本框，分別放置在矩形（rect）的上面和下面，上面的文本框取名為num，下面的文本框取名為day。設(shè)置num的提示文字為170，字體顏色為藍(lán)色，居中。設(shè)置day的提示文字為自定義，居中。
6. 拖入一個(gè)矩形，取名刪除，取消邊框，寬高設(shè)為47*32，輸入刪除二字，字體顏色為紅色，加下劃線，然后設(shè)為隱藏（注意：以上所說(shuō)所有的元件都要拖進(jìn)list里面?。?/li>

完成上述步驟后的效果如下圖所示：

7.返回index頁(yè)面，拖入一個(gè)按鈕，輸入文字行+1，然后選中l(wèi)ist（中繼器），在右側(cè)屬性-中繼器做如下設(shè)置。

這時(shí)，index頁(yè)面如下圖所示：

添加交互

1. 選中l(wèi)ist,開始設(shè)置list的交互，如下圖所示：

2. 選中行+1按鈕，設(shè)置下面交互：

3. 回到中繼器的編輯頁(yè)面（list(index)），選中矩形rect，設(shè)置如下交互：

單擊時(shí)：

右擊時(shí)：

4. 選中文本框num，設(shè)置如下交互：

5. 選中矩形‘刪除’，設(shè)置以下交互：

交互設(shè)置完畢，點(diǎn)擊預(yù)覽就可以實(shí)現(xiàn)。

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

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