AXURE教程:餅圖

6 評論 10351 瀏覽 23 收藏 4 分鐘

你知道如何用AXURE做一個餅圖嗎?一起來看看吧~

本文將教大家如何用AXURE做一個餅圖。

在線演示地址:http://ije8g9.axshare.cn/#g=1&p=%E9%A5%BC%E5%9B%BE

功能介紹

  1. 圖表不需要聯外網,數據也不是寫死的,只需在中繼器或表格中填寫數據即可自動生成圖表,操作簡單。
  2. 大小、顏色、樣式、交互可以自由變換。
  3. 鼠標移入時能顯示具體數據。

制作方法

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協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 不靠譜呀,最上層的半圓不就擋住了?

    來自廣東 回復
    1. 是這個理

      來自上海 回復
    2. 可以用動態面板

      來自上海 回復
    3. 我是每個半圓都做動態面板,第一步先在動態面板內旋轉變成每一塊,第二步把動態面板旋轉到指定位置。

      來自廣東 回復
  2. 原型預覽及下載地址:
    https://axhub.im/pro/1882d0a30c3301c9

    來自廣東 回復
  3. 可以給我看一下原型嘛 ?? 沒有做出來 ??

    來自福建 回復