本文作者主要分享了一個(gè)復(fù)用性還算高的統(tǒng)計(jì)圖以及數(shù)據(jù)表格原型，一起來文中看看~

筆主在一家ToB醫(yī)療數(shù)據(jù)公司做產(chǎn)品，由于公司體制不完善并且每次產(chǎn)品開發(fā)周期短，每次做的原型都會(huì)被開發(fā)噴不保真。

因?yàn)榻?jīng)常會(huì)涉及到統(tǒng)計(jì)圖、表格這些東西，一般沒有時(shí)間做高保真的情況下，會(huì)直接用axure拉幾個(gè)框或者貼張圖片簡單制作一個(gè)。為了不再被開發(fā)哥哥噴，這次就用工作之余做了一個(gè)復(fù)用性還算高的統(tǒng)計(jì)圖以及數(shù)據(jù)表格原型。

作為一個(gè)經(jīng)常潛水的產(chǎn)品小白，第一次發(fā)文章，如有不足之處，還望指正。

生成不同的柱狀圖

生成統(tǒng)計(jì)圖

（1）根據(jù)選中表格中不同的數(shù)據(jù)行生成不同的數(shù)據(jù)，在這里表格是用中繼器來完成，統(tǒng)計(jì)圖（左）用的是五個(gè)長方形來根據(jù)不同的數(shù)據(jù)改變尺寸，統(tǒng)計(jì)圖（右）是在另一個(gè)中繼器里放了一個(gè)長方形，這里數(shù)據(jù)的傳遞用的是全局變量。

統(tǒng)計(jì)按鈕點(diǎn)擊事件

（2）為什么右邊的統(tǒng)計(jì)圖要用中繼器呢？

目的是想在后面有空的做一個(gè)圖表的統(tǒng)計(jì)項(xiàng)，也可以增加和篩選的功能。

表格數(shù)據(jù)的添加與編輯

添加數(shù)據(jù)行

1. 點(diǎn)擊添加行新增一行，點(diǎn)擊編輯輸入數(shù)據(jù)，點(diǎn)擊保存后即可完成對(duì)該行數(shù)據(jù)的保存。
2. 選中改行，點(diǎn)擊統(tǒng)計(jì)，即可生成新的數(shù)據(jù)統(tǒng)計(jì)圖。
3. 表格中有合計(jì)一項(xiàng)，是不可編輯的。在點(diǎn)擊保存后自動(dòng)完成對(duì)第二到六列數(shù)據(jù)的統(tǒng)計(jì)。

添加行按鈕點(diǎn)擊事件

編輯點(diǎn)擊事件

表格數(shù)據(jù)的刪除與修改

編輯與刪除(原文件過大，壓縮后有點(diǎn)糊)

點(diǎn)擊編輯對(duì)該行數(shù)據(jù)進(jìn)行修改，點(diǎn)擊刪除刪除該行數(shù)據(jù)。因?yàn)槲沂前烟砑有蟹旁谥欣^器中的，所以當(dāng)刪除到最后一行時(shí)，不會(huì)真的刪除，只會(huì)把當(dāng)前行所有的數(shù)據(jù)設(shè)為0。

刪除按鈕點(diǎn)擊事件

表格中統(tǒng)計(jì)項(xiàng)的修改

表頭修改

（1）點(diǎn)擊表格左上的修改表頭，可對(duì)表格表頭進(jìn)行修改。圖中的示例表頭為科目分?jǐn)?shù)統(tǒng)計(jì)，可在網(wǎng)頁中進(jìn)行自定義修改。修改完點(diǎn)擊保存，在下一次統(tǒng)計(jì)時(shí)，統(tǒng)計(jì)圖的每一個(gè)統(tǒng)計(jì)項(xiàng)也會(huì)進(jìn)行改變，這個(gè)過程中數(shù)據(jù)的傳遞同樣用到的是全局變量。

（2）修改用例與添加時(shí)的編輯一致，編輯時(shí)的文本框類型筆主設(shè)置的只允許數(shù)字，可自行更改。

修改表頭點(diǎn)擊事件-1

?修改表頭點(diǎn)擊事件-2

數(shù)據(jù)全部刪除后新增

全部刪除后新增行

這個(gè)和上面對(duì)編輯與刪除行的介紹一致，主要展示了刪除后的新增。

表格數(shù)據(jù)的查找與分頁

因?yàn)橹霸诮y(tǒng)計(jì)圖與中繼器之間數(shù)據(jù)的傳遞費(fèi)的時(shí)間比較多，查找和分頁是在寫這篇分享的時(shí)候順手做的，沒有生成GIF動(dòng)圖。查找與分頁應(yīng)該大家也都比較了解，這里放就先暫且放圖片。

對(duì)名稱的模糊搜索

文本改變時(shí)的檢索

因?yàn)樽銎饋肀容^繁瑣，這里的搜索我是從網(wǎng)上找了兩個(gè)制作好元件然后自己進(jìn)行了修改。

搜索結(jié)果

分頁展示

分頁模塊可以顯示當(dāng)前的頁面與總頁面，在輸入頁面進(jìn)行目標(biāo)頁面的跳轉(zhuǎn)。

PS：Axure對(duì)中文不太友好，如果在對(duì)文本框進(jìn)行輸入的時(shí)候輸不進(jìn)去建議輸入法切換為英文。

文件地址

展示地址：https://q9qpex.axshare.com/index.html

源文件鏈接：https://pan.baidu.com/s/15BLE0dndNt5fSYdQ153jeg

有任何問題歡迎在下方留言。

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

題圖作者提供