中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

由于Axure自帶的元件庫里并沒有玫瑰圖，所以本期教程主要介紹如果制作高保真動態玫瑰圖，方便我們日后的使用。

一、制作完成后應具備以下效果

• 根據表格數據，自動生成對應玫瑰圖；
• 載入時，系統自動完成玫瑰圖動態生成的效果；
• 鼠標移入對應扇形內時，可以查看具體數據。

二、制作材料及交互

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

1. 表格

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

2. 最大值文本

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

3. 扇形

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

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

1）設置縮小尺寸——設置扇形的尺寸為當前當前的寬高除以20，錨點為居中。

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

3）設置放大尺寸——設置寬為，表格對應的數據/最大值*他的寬*20；設置高為表格對應的數據/最大值*他的高*20。

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

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

4. 折線和文本

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

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

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

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

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

每個扇形都是這樣設置，可以直接復制粘貼，然后適當更改內容即可。

5. 右側標簽欄

通過矩形和文本，矩形設置成小正方形，標簽對應各個顏色的標題。

這里我們也是用設置文本的交互，當標簽的標題文本載入時，設置該文本的值為表格對應標題文字，這樣我們以后只需要在表格填寫即可，不需要在標簽也重復填寫內容。

6. 標簽彈窗

我們用矩形制作，調整適當的大小，選擇外部陰影，默認隱藏。后續我們會做一個交互，移入對應的扇形顯示對應的數據。

7. 熱區

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

鼠標移入熱區時：

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

鼠標移出熱區時：

隱藏——隱藏標簽彈窗。

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

移動——設置標簽彈出移動到絕對位置，x坐標=Cursor.x+10，y坐標=Cursor.y+10。Cursor.x代表鼠標當前的x坐標，Cursor.y代表鼠標當前的y坐標。

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

本文由 @AI產品人 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議