Axure 教程:環形圖

9 評論 12588 瀏覽 45 收藏 4 分鐘

你知道如何用Axure做一個環形圖嗎?一起來看看吧~

本文將教大家如何用Axure做一個環形圖。

在線演示地址:http://ije8g9.axshare.cn/#g=1&p=環形圖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. 我都是用echarts直接配置好,放到原型里面。

    來自北京 回復
    1. 會有交互嗎?直接是圖片?

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

    來自廣東 回復
  3. 當最大值小于總數的50%時,第一個值的的半圓環,總是顯示全部(如上述材料準備中的圖片所示),這樣就造成了第一個數的值不管是多少,做出來的環形占比都在50%,跪求大神詳細解答

    來自江蘇 回復
    1. 這是分類兩種,大于50%的情況和小于50%的情況,具體可以下載原型查看邏輯

      來自廣東 回復
  4. 求原型~~~謝謝 ??

    來自福建 回復
  5. ?? 博主可以留原型學習一下嗎

    來自重慶 回復
  6. 樓主 求原型 ??

    來自北京 回復