【Axure教程】:動態扇形統計圖

3 評論 8304 瀏覽 16 收藏 5 分鐘

導讀:我們在工作中做一些原型圖時,尤其是后臺原型我們會經常涉及到統計圖信息,上兩期我詳細為大家介紹了如何繪制動態柱狀統計圖及動態折線統計圖,本期我將再次為大家詳細介紹一下如何繪制動態扇形統計圖。

首先我們先思考一下:

  • 什么場景會使用到扇形統計圖呢?
  • 相比于柱狀統計圖和折線統計圖我們繪制扇形統計圖的優點在哪呢?
  • 如何快速設計一款美觀的扇形統計圖以應用我們的工作中呢?

一、使用場景

扇形統計圖一般適用于一個維度各項指標占總體的占比情況,分布情況,能直觀顯示各項目和總體的占比、分布,強調整體和個體間的比較。適合比較簡單的占比比例圖,不要求精度的場景。例如一個班級男女生的占比情況。使用時數據建議不超過9條。

二、優點分析

1、可以清楚地表示出各部分數量與總數之間的關系;

2、可以直觀地看出各部分數量的大小關系。

3、用扇形的面積表示部分在總體中所占的百分比;

三、設計原型

本期我將以常見的某學校各個學院學生在全校占比作為案例進行繪制原型。

演示預覽:https://7dnfs9.axshare.com

首先,我們先插入一個扇形圖,大小和圓角根據需要自行設置參數

我們將插入的扇形圖轉換為動態面板,雙擊動態面板后對里面的扇形圖再次轉換成動態面板并命名為【紅色】

復制【紅色】扇形圖成多個動態面板,并分別根據自身需要命名,此處我將根據顏色進行命名。

創建完成后,將這些統計圖疊加在一起

接下來,我們進行對已創建的扇形圖進行交互處理

點擊最外層的動態面板,設置 載入時-旋轉-選擇青色-順勢針-0°-線性-500ms,依次對疊加的扇形統計圖做相應的旋轉角度處理,接著我們預覽就可以得到一個動態的扇形統計圖啦~~

最后,我們可以為了讓扇形統計圖更加美觀,可以在統計圖中間加一個圓形,也可以在不同的統計圖上標上對應的數據相關信息,在此我就不做展示啦~~

希望本篇介紹可以幫助到小伙伴們~~~

 

本文由 @畫圖仔 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Pexels,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 為什么要轉化成兩次動態面板呢,還有就是這個角度的概念不是很懂呢

    來自浙江 回復
    1. 可以使多個不同顏色的扇形逐級隱藏在其后的

      來自江蘇 回復
  2. 為什么要轉化成兩次動態面板呢,還有就是這個角度的概念不是很懂呢

    來自浙江 回復