你知道如何用Axure做一個環(huán)形圖嗎？一起來看看吧~

本文將教大家如何用Axure做一個環(huán)形圖。

在線演示地址：http://ije8g9.axshare.cn/#g=1&p=環(huán)形圖http://ije8g9.axshare.cn/#g=1&p=%E9%A5%BC%E5%9B%BE

功能介紹

1. 圖表不需要聯(lián)外網(wǎng)，數(shù)據(jù)也不是寫死的，只需在中繼器或表格中填寫數(shù)據(jù)即可自動生成圖表，操作簡單。
2. 大小、顏色、樣式、交互可以自由變換。
3. 鼠標(biāo)移入時能顯示具體數(shù)據(jù)。

制作方法

1. 材料準(zhǔn)備

準(zhǔn)備n個半環(huán)形填上不同的顏色，放置同一位置如下圖所示。環(huán)形的制作，可以由矩形、一個大圓和一個小圓通過布朗運算得到。

2. 表格制作

如下圖所示，根據(jù)需求做好表格，最大的值一定要發(fā)在一個個格子。

3. 設(shè)置表格總數(shù)

表格總數(shù)=各值加總

4. 旋轉(zhuǎn)

旋轉(zhuǎn)分兩種情況：

1）最大值占總值少于等于50%

以雞尾酒為例，那么第一個環(huán)形旋轉(zhuǎn)的角度就是500/總數(shù)*360，第二個環(huán)形旋轉(zhuǎn)的角度為400/總數(shù)*360+第一個半環(huán)旋轉(zhuǎn)的角度，以此類推。

2）最大值占總值大于50%

這時，我們要復(fù)制一個和第一個半環(huán)一模一樣的半環(huán)，影藏掉，當(dāng)最大值占總值大于50%時，顯示出來。然后在旋轉(zhuǎn)第一個半環(huán)。

以雞尾酒為例，那么第一個環(huán)形旋轉(zhuǎn)的角度就是500/總數(shù)*360-180，第二個環(huán)形旋轉(zhuǎn)的角度為400/總數(shù)*360+第一個半環(huán)旋轉(zhuǎn)的角度，以此類推。

5. 標(biāo)簽制作

做一個標(biāo)簽，如下圖所示，默認隱藏。

思路：鼠標(biāo)移入矩形的時候，顯示標(biāo)簽，標(biāo)簽跟隨鼠標(biāo)移動，讓Item.no的值=文本標(biāo)簽2，Item.x的值=文本標(biāo)簽1，以此類推。

鼠標(biāo)移出的時候，隱藏標(biāo)簽即可。

最后，制作完成后，以后使用方便，僅需簡單填寫中繼器的內(nèi)容，即可擁有完美的效果，所以強烈推薦給各位使用。

有需要原型的小朋友給我留言哦，謝謝閱讀。

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

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