返回首頁

AxureRP 統計圖表效果實例教程

時間:2013-05-16 23:13來源:知行網www.wtckvq.live 編輯:麥田守望者

這個示例要講的是用AxureRP來實現統計圖表的制作,這個效果一般只有在需要有自動生成統計圖表的地方才會用到,功能就是提供了類似SwiffChart那樣,在一個表格里面錄入原始數據后,能自動生成柱狀圖的效果。這個效果比較花哨,設計起來也相當復雜,不建議大家在平時的原型設計里面去專門設計這樣的功能,類似用到這樣功能的地方可以做出說明,要求能自動生成圖表即可,這樣還可以多說明幾種圖表,如餅圖,線圖等。

示例是從別人制作的原型演示示例里面摘出來的,這里以介紹說明為主,告訴大家這個功能是如何實現,推薦已經對AxureRP比較了解的朋友來學習這個實例。統計圖表功能有兩個難點,一個是多維的表格設計,每個表格都需要考慮其單元格內容的編輯控制,維數越多越復雜;第二個是柱狀圖的顯示,維數多了之后需要用不同顏色的柱狀圖來加以區分,還要根據表格所填的數字來顯示不同的長度,因此也是維數越多越復雜。

首先是表格的設計,例子是四行六列的表格,去掉坐標軸所需的頭,則為三行五列,因此需要設計十五個單元格。控制鼠標單擊可輸入的效果在前面的《AxureRP教程–相冊效果》里有介紹,即用動態面板來約束,一個狀態為不可編輯的矩形控件和文本塊組件,一個狀態為一個單行文本框,輸入結束后需要將單行文本框的值傳遞給文本塊組件。這里有一個技巧,就是所有的單元格設置其實都是一樣的,因此可以在設計好一個單元格之后進行復制,唯一需要注意的問題就是要做好命名區分,因為后面的柱狀圖顯示是要分別取值的。

AxureRP 統計圖表效果實例教程1

其次就是柱狀圖顯示的控制,因為是三行五列,所以X軸需要有五個點,Y軸是三個點,需要有三種顏色的圖來區分顯示。這里以列為單位,一列下有三個單元格,每個單元格代表一個數字。不同顏色的柱狀圖以動態面板來實現,這個數字就是不同的動態面板的位移量,例子中的位移量是1:10的比例。這樣就實現了每個單元格的數值對應控制一種顏色的柱狀圖顯示,所以前面的命名區分是比較重要的。每一列的控制都類似,柱狀圖的動態面板默認都是隱藏,圖表面板默認也是隱藏的,因為需要先看到表格來填寫原始數據。例子中是用了一組單選按鈕的OnFocus事件來控制柱狀圖顯示的,先判斷當前是否需要移動,并且移動的距離是否已經和表格所填的數字相等,如果沒有則位移10個單位,如果已經夠了,則停止位移,這樣控制的好處是有緩慢位移的效果,不需要再在動態面板里面去設置每隔多長時間去位移了。

AxureRP 統計圖表效果實例教程2

效果如上所示,這個例子里面有一種新的思路,就是通過單選按鈕間不停的變換焦點來達到動態面板的延時移動的目的,這個功能在《AxureRP教程–焦點應用》里有說明,因此只要愿意去想,還是能有很多好的實現方式的。

大家可以學習一下源文件,建議在看的時候將動態面板查看視圖打開,否則會看的比較吃力的,直接點相應的動態面板狀態,就能定位到相應頁面去了,有問題可以交流。

------分隔線----------------------------
標簽(Tag):AxureRP AxureRP教程 AxureRP軟件下載 AxureRP序列號
------分隔線----------------------------
推薦內容
猜你感興趣
深蓝海域APP