AXURE教程:餅圖
你知道如何用AXURE做一個餅圖嗎?一起來看看吧~
本文將教大家如何用AXURE做一個餅圖。
在線演示地址:http://ije8g9.axshare.cn/#g=1&p=%E9%A5%BC%E5%9B%BE
功能介紹
- 圖表不需要聯外網,數據也不是寫死的,只需在中繼器或表格中填寫數據即可自動生成圖表,操作簡單。
- 大小、顏色、樣式、交互可以自由變換。
- 鼠標移入時能顯示具體數據。
制作方法
1. 材料準備
準備n個半圓形填上不同的顏色,放置同一位置如下圖所示。
2. 表格制作
如下圖所示,根據需求做好表格,最大的值一定要發在一個個格子。
3. 設置表格總數
表格總數=各值加總
4. 旋轉
旋轉分兩種情況:
1最大值占總值少于等于50%
以雞尾酒為例,那么第一個圖形旋轉的角度就是500/總數*360,第二個圖形旋轉的角度為400/總數*360+第一個半圓旋轉的角度,以此類推。
2)最大值占總值大于50%
這時,我們要復制一個和第一個半圓一模一樣的半圓,影藏掉,當最大值占總值大于50%時,顯示出來。然后在旋轉第一個半圓。
以雞尾酒為例,那么第一個圖形旋轉的角度就是500/總數*360-180,第二個圖形旋轉的角度為400/總數*360+第一個半圓旋轉的角度,以此類推。
5. 標簽制作
做一個標簽,如下圖所示,默認隱藏。
思路:鼠標移入矩形的時候,顯示標簽,標簽跟隨鼠標移動,讓Item.no的值=文本標簽2,Item.x的值=文本標簽1,以此類推。
鼠標移出的時候,隱藏標簽即可。
最后,制作完成后,以后使用方便,僅需簡單填寫中繼器的內容,即可擁有完美的效果,所以強烈推薦給各位使用。
有需要原型的小朋友給我留言哦,謝謝閱讀。
本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
評論
不靠譜呀,最上層的半圓不就擋住了?
是這個理
可以用動態面板
我是每個半圓都做動態面板,第一步先在動態面板內旋轉變成每一塊,第二步把動態面板旋轉到指定位置。
原型預覽及下載地址:
https://axhub.im/pro/1882d0a30c3301c9
可以給我看一下原型嘛 ?? 沒有做出來 ??