編輯導(dǎo)語：在數(shù)據(jù)可視化圖表中，玫瑰圖是常見的圖表類型之一，通過玫瑰圖的展示，我們可以更加清晰地觀察數(shù)據(jù)。那么，我們可以如何利用Axure來制作玫瑰圖？本文作者便介紹了利用Axure來制作高保真動態(tài)玫瑰圖的方法，一起來看一下。

玫瑰圖是數(shù)據(jù)可視化分析里面很常用的分析圖表，通過色彩繽紛的圖表形式，讓數(shù)據(jù)能夠更加讓人印象深刻。

由于Axure自帶的元件庫里并沒有玫瑰圖，所以本期教程主要介紹如果制作高保真動態(tài)玫瑰圖，方便我們?nèi)蘸蟮氖褂谩?/p>

一、制作完成后應(yīng)具備以下效果

• 根據(jù)表格數(shù)據(jù)，自動生成對應(yīng)玫瑰圖；
• 載入時，系統(tǒng)自動完成玫瑰圖動態(tài)生成的效果；
• 鼠標(biāo)移入對應(yīng)扇形內(nèi)時，可以查看具體數(shù)據(jù)。

二、制作材料及交互

本案例以6個扇形的玫瑰圖為例，制作材料全部都是用Axure原生的的材料，具體包括以下材料。

1. 表格

表格用于記錄各個扇形代表的名稱和具體數(shù)據(jù)，后續(xù)需要用這些數(shù)據(jù)進行運算，所以最好對每一個格子名命名好，方便后續(xù)變量時的選擇。

2. 最大值文本

新建一個文本標(biāo)簽，需要填寫表格中最大的數(shù)據(jù)值，例如上面表格最大數(shù)據(jù)值為200，該標(biāo)簽只用于邏輯計算，可以默認隱藏，后續(xù)會通過該數(shù)據(jù)自動畫圖玫瑰圖。

3. 扇形

可以通過矩形右鍵選擇變換形狀，就可以選擇扇形，然后調(diào)整角度為60度左右，復(fù)制出6個扇形，擺放好，并且設(shè)置不同的顏色，案例中默認扇形的寬和高均為200。

在各個扇形加載時，我們需要先讓扇形縮小到比較小的一個面積，然后再慢慢放大，這樣就做成一個動態(tài)的效果了，具體交互如下：

1）設(shè)置縮小尺寸——設(shè)置扇形的尺寸為當(dāng)前當(dāng)前的寬高除以20，錨點為居中。

2）等待——等500豪秒，這里注意，為了有連續(xù)的動態(tài)效果，第一個出來的等待500毫秒，第二個需要等待1000毫秒，如此類推。

3）設(shè)置放大尺寸——設(shè)置寬為，表格對應(yīng)的數(shù)據(jù)/最大值*他的寬*20；設(shè)置高為表格對應(yīng)的數(shù)據(jù)/最大值*他的高*20。

因為之前縮小了20倍，所以寬或者高乘20，就是恢復(fù)原形的形狀，然后表格數(shù)據(jù)除以最大值得到的比例代表他應(yīng)該在原來的基礎(chǔ)上大小的比例。例如，表格1數(shù)據(jù)是200，最大值也是200，比值為1，所以他還是200的寬高；表格2為190，比值為19/20，所以他的寬高變?yōu)?90，如此類推。

注意改設(shè)置尺寸需要增加一個動畫效果，我們選擇線性動畫，時間為1000s。

4. 折線和文本

使用折線和文本標(biāo)簽，制作成如下圖形狀，將每個扇形對應(yīng)的折線和文本標(biāo)簽一一組合成組，默認隱藏。

我們不希望做重復(fù)的工作，希望直接從表格中獲取數(shù)據(jù)，所以我們在折線文本載入時添加交互：

設(shè)置文本——分成兩部分，前面數(shù)據(jù)部分為這是為表格對應(yīng)的數(shù)據(jù)，后面百分比=對應(yīng)表格的數(shù)據(jù)/表格數(shù)據(jù)總和*100，考慮到除不盡的情況，我們還要用fixed函數(shù)保留小數(shù)點。

在各個扇形加載時，我們等扇形動畫結(jié)束后，再把折線數(shù)據(jù)組，顯示出來，需增加以下交互：

• 等待——等1000豪秒，這里和放大的動畫時間一致；
• 顯示——顯示對應(yīng)的折線組合。

每個扇形都是這樣設(shè)置，可以直接復(fù)制粘貼，然后適當(dāng)更改內(nèi)容即可。

5. 右側(cè)標(biāo)簽欄

通過矩形和文本，矩形設(shè)置成小正方形，標(biāo)簽對應(yīng)各個顏色的標(biāo)題。

這里我們也是用設(shè)置文本的交互，當(dāng)標(biāo)簽的標(biāo)題文本載入時，設(shè)置該文本的值為表格對應(yīng)標(biāo)題文字，這樣我們以后只需要在表格填寫即可，不需要在標(biāo)簽也重復(fù)填寫內(nèi)容。

6. 標(biāo)簽彈窗

我們用矩形制作，調(diào)整適當(dāng)?shù)拇笮。x擇外部陰影，默認隱藏。后續(xù)我們會做一個交互，移入對應(yīng)的扇形顯示對應(yīng)的數(shù)據(jù)。

7. 熱區(qū)

因為Axure里面雖然看到的是扇形，但是它的占位的地方也是一個正方形，這樣會導(dǎo)致后續(xù)做交互的時候，前面的扇形會擋住后面的扇形。所以這里我們通過熱區(qū)來圍住扇形的位置，制作一個比較高保真的效果。

鼠標(biāo)移入熱區(qū)時：

• 顯示——顯示標(biāo)簽彈窗
• 設(shè)置文本——這里我們用設(shè)置富文本，因為富文本可以設(shè)置不同的文字顏色，我們根據(jù)不同的文字，移入藍色傘形就藍色文本，紅色傘形就設(shè)置紅色文本。文本內(nèi)容由對應(yīng)的表格標(biāo)題、文本數(shù)據(jù)和百分比組成，其中的文本數(shù)據(jù)和百分比和前面介紹的的設(shè)置折線文本一致，可以直接復(fù)制過來使用。

鼠標(biāo)移出熱區(qū)時：

隱藏——隱藏標(biāo)簽彈窗。

鼠標(biāo)在人去中移動時，我們做一個標(biāo)簽跟隨鼠標(biāo)移動的一個交互：

移動——設(shè)置標(biāo)簽彈出移動到絕對位置，x坐標(biāo)=Cursor.x+10，y坐標(biāo)=Cursor.y+10。Cursor.x代表鼠標(biāo)當(dāng)前的x坐標(biāo)，Cursor.y代表鼠標(biāo)當(dāng)前的y坐標(biāo)。

以上就是高保真玫瑰圖的制作方法了，感興趣的同學(xué)們可以動手試試，謝謝您的閱讀。

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

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