點擊觀看視頻教程
Axure制作動態玫瑰餅圖教程；
壹、生產完成後應具有以下效果。
根據表格數據自動生成相應玫瑰圖；
加載時，系統自動完成玫瑰圖動態生成的效果；
當鼠標移動到相應的扇區時，可以查看具體的數據。
二、制作材料及互動本案例以六個扇形玫瑰圖為例。所有生產材料均采用Axure天然材料，包括以下材料。1.表格是用來記錄每個板塊代表的名字和具體數據的，後續操作需要用到，所以最好給每個網格命名，方便後續變量的選取。2.為最大文本創建新的文本標簽時，需要在表格中填寫最大數據值。例如，上表中的最大數據值是200。此標簽僅用於邏輯計算，默認情況下可以隱藏。稍後，您將通過這些數據自動繪制玫瑰圖。3.妳可以通過右擊矩形改變其形狀來選擇壹個扇區，然後調整角度到60度左右，復制六個扇區，放置好，設置不同的顏色。在這種情況下，扇區的默認寬度和高度是200。在加載每個扇區的時候，我們需要先把扇區縮小到壹個更小的區域，然後再慢慢放大，這樣才能做出壹個動態的效果。具體交互如下:1)設置縮小大小——設置扇形大小為當前寬高除以20，錨點為中心。2)等待-等待500秒。這裏註意，為了有壹個連續的動態效果，第壹個將等待500毫秒，第二個將等待1000毫秒，以此類推。3)設置放大尺寸——設置寬度為，表格對應的數據/最大值* his寬度* 20；將高度設置為表格* his height *20對應的數據/最大值。因為之前已經縮小了20倍，所以寬度或者高度乘以20就是恢復原來的形狀，然後表格數據除以最大值得到的比值就代表了它在原來基礎上的大小的比值。比如表1中的數據是200，最大值是200，比值是1，所以還是200的寬度和高度；表2是190，比值是19/20，那麽它的寬度和高度就變成了190，以此類推。請註意，更改大小需要添加動畫效果。我們選擇線性動畫，時間是1000s。4.使用折線和文本標簽將折線和文本做成如下圖所示的形狀，並將每個扇區對應的折線和文本標簽逐壹組合成組，默認隱藏。我們不想做重復性的工作，而是想直接從表格中獲取數據，所以在加載折線文本時加入交互:設置文本——將其分成兩部分，前面的數據部分是表格對應的數據，後面的百分比=對應表格的數據/表格數據之和*100。考慮到用不完的情況，還是要用固定的函數來保留小數點。當每個扇區被加載時，我們將在扇區動畫完成後顯示折線數據組。需要添加以下交互:wait-等待1000秒，與放大後的動畫時間壹致；
顯示——顯示相應的多段線組合。
每個扇區都是這樣設置的，可以直接復制粘貼，然後適當更改內容。5.右側的標簽欄通過壹個矩形和文字，矩形設置為小方塊，標簽對應每種顏色的標題。這裏我們也使用設置文本的交互。在加載標簽的標題文本時，將文本的值設置為表格對應的標題文本，這樣我們以後只需要填寫表格，不需要在標簽中重復填寫內容。6.標簽彈出窗口由矩形構成，調整到合適的大小，選擇外部陰影，默認隱藏。稍後，我們將進行壹次交互，並移動到相應的扇區，以顯示相應的數據。7.熱區因為Axure在裏面看到的是扇形，但是它的空間也是正方形，這就導致了下面的交互，前面的風扇會擋住後面的扇形。所以這裏我們通過熱區把扇形的位置圍起來，做壹個相對高保真的效果。將鼠標移動到熱區:display-顯示標簽彈出窗口。
設置文本——這裏我們設置富文本，因為富文本可以設置不同的文本顏色。根據不同的文本，我們分為藍色雨傘設置藍色文本，紅色雨傘設置紅色文本。文本內容由對應的表格標題、文本數據和百分比組成，其中文本數據和百分比與前面介紹的設置折線文本壹致，可以直接復制使用。
將鼠標移出熱區:隱藏-隱藏標簽彈出窗口。鼠標移動時，我們做壹個標簽跟隨鼠標的交互:移動——設置標簽彈出並移動到絕對位置，x坐標=Cursor.x+10，y坐標=Cursor.y+10。Cursor.x表示鼠標當前的x坐標，Cursor.y表示鼠標當前的y坐標。以上是關於“Axure如何做動態玫瑰餅狀圖？”希望能幫到妳~！更多Axure原型技巧，盡在Axure相關文章！很多小夥伴選擇在網上學習Axure，但是很多都是東拼西湊的學習，這樣學的可能和實際操作不壹樣~所以還是系統學習Axure比較好！Axure的自學視頻課相信能給妳知識和動手經驗~推薦熱門課程。
AxureRP原型圖零基礎入門快速掌握素描+Axure手機支付寶APP設計實用教程AxureAPP唯壹精選交互設計教程Axure電商APP購物車交互案例教程。