編輯導(dǎo)語：統(tǒng)計(jì)圖在我們?nèi)粘Ｉ钪惺殖Ｒ姡敲?，如何做出?dòng)態(tài)化的柱狀統(tǒng)計(jì)圖，既讓客戶看得清晰，也看得賞心悅目？本篇文章里，作者總結(jié)了如何利用Axure繪制動(dòng)態(tài)柱狀統(tǒng)計(jì)圖的流程，一起來看一下。

我們?cè)诋嬙蛨D時(shí)經(jīng)常會(huì)遇到各種統(tǒng)計(jì)圖，一個(gè)動(dòng)態(tài)的統(tǒng)計(jì)圖演示給客戶或領(lǐng)導(dǎo)看時(shí)會(huì)更容易加分，本文先將為大家教學(xué)如何繪制動(dòng)態(tài)柱狀統(tǒng)計(jì)圖。

平時(shí)工作中會(huì)遇到許多需要進(jìn)行統(tǒng)計(jì)的地方，如何快速畫出既美觀又實(shí)用的統(tǒng)計(jì)圖呢，本文將先帶大家解答如何繪制動(dòng)態(tài)柱狀統(tǒng)計(jì)圖。

演示效果：https://hc4wih.axshare.com

一、動(dòng)態(tài)柱狀統(tǒng)計(jì)圖繪制教程

首先，我們打開Axure后，繪制相應(yīng)的基礎(chǔ)線段和文字描述（本文參數(shù)僅供參考，請(qǐng)根據(jù)實(shí)際需要繪制參數(shù)）。

選取一個(gè)矩形框，將高度設(shè)置為：1，寬度和填充顏色根據(jù)使用場(chǎng)景調(diào)整，此處我將矩形放置“10月”上方中心位置，方便后面動(dòng)態(tài)效果展示。

接著我們進(jìn)行交互效果的設(shè)置。

選擇【載入時(shí)-設(shè)置尺寸-當(dāng)前元件】，高度設(shè)為：66，動(dòng)畫效果：線性? 500毫秒。

接著我們復(fù)制已設(shè)定好的矩形框，分別復(fù)制在不同的“月份上方”，對(duì)已復(fù)制的矩形框調(diào)整需要的尺寸高度。

最后我們可以根據(jù)美觀效果，在不同的矩形高度上方設(shè)置數(shù)字座位高度的顯示并對(duì)數(shù)字進(jìn)行命名，將數(shù)字進(jìn)行隱藏，對(duì)矩形設(shè)置交互【載入時(shí)-顯示-數(shù)字-逐漸-1000毫秒】，這樣我們整個(gè)的動(dòng)態(tài)柱狀統(tǒng)計(jì)圖就做出來啦~

下期將為大家詳細(xì)介紹如何繪制動(dòng)態(tài)折線統(tǒng)計(jì)圖及動(dòng)態(tài)餅狀圖~~

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

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