Axure 教程:環形圖
你知道如何用Axure做一個環形圖嗎?一起來看看吧~
本文將教大家如何用Axure做一個環形圖。
在線演示地址:http://ije8g9.axshare.cn/#g=1&p=環形圖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協議
評論
我都是用echarts直接配置好,放到原型里面。
會有交互嗎?直接是圖片?
原型預覽及下載地址:
https://axhub.im/pro/1882d0a30c3301c9
當最大值小于總數的50%時,第一個值的的半圓環,總是顯示全部(如上述材料準備中的圖片所示),這樣就造成了第一個數的值不管是多少,做出來的環形占比都在50%,跪求大神詳細解答
這是分類兩種,大于50%的情況和小于50%的情況,具體可以下載原型查看邏輯
求原型~~~謝謝 ??
?? 博主可以留原型學習一下嗎
樓主 求原型 ??