- 寫給UI設計師看的數據可視化設計
- 吳星辰
- 800字
- 2021-05-19 17:46:48
2.1.4 占比圖形
占比圖形主要用于展示分類數據占整體的比例情況,常用的圖形有餅圖、環形圖、堆積面積圖、矩形樹圖、旭日圖等。
1. 餅圖
提到數據的占比,相信你第一個就會想到餅圖,如圖2-16所示。餅圖是展示占比數據最直觀的圖形,通過弧度大小來表示分類的占比多少。但餅圖有一定的局限性,當占比數值接近或占比分類過多時,在視覺上就不容易辨別各個類別占比的大小。
在數據可視化產品中,因為餅圖是大面積的色塊,視覺上會非常突顯,很容易搶走重要數據的風頭,所以使用時要酌情考慮。

圖2-16
2. 環形圖
環形圖與餅圖最明顯的區別就是中間區域是空的。因為環形圖的視覺表現不像餅圖那樣突出,在環形圖的空心區域還可以放圖標、標題、數據等,相對餅圖其利用率更高,所以在數據可視化產品中更受歡迎,如圖2-17所示。

圖2-17
3. 堆積面積圖
堆積面積圖是疊加數據,沒有重疊的部分,它的整體色塊面積就是數據總量,其中不同的分類數據可展示不同的占比情況。圖2-18所示不僅可以展示店鋪三種商品的總銷量,還可以展示每種商品在對應月份上的占比情況。

圖2-18
另一種形式的堆積面積圖是100%堆積面積圖,即所有分類的總占比為100%,其同樣是展示總量下分類的占比情況,只是數據結構有差異。
如果堆積面積圖是隨時間變化的,則能體現數據的時間趨勢;如果它不是隨時間變化的,則主要強調占比和對比情況。除了用堆積面積圖,你還可以考慮使用堆積柱狀圖。
4. 矩形樹圖
矩形樹圖是非常直觀的占比圖形,可展示多層級結構的占比情況。如果用不同顏色表示各個分類,則可以在大分類中不斷下鉆二級分類。圖2-19所示為某些手機品牌及下鉆到二級的型號分類。需要注意的是,在不斷下鉆的同時要保證圖形的易讀性。

圖2-19
5. 旭日圖
旭日圖相當于多個餅圖,能夠展示多層級的數據,同時還能夠表示各分類的關系及占比情況。如圖2-20所示,不同的顏色代表不同的分類,一個圓環代表一個層級,每個層級中可以有多個表示此層級下占比的類別。旭日圖最內層的圓環層級最高,越往外層級越低。

圖2-20
- Docker進階與實戰
- 無代碼編程:用云表搭建企業數字化管理平臺
- Learning Selenium Testing Tools(Third Edition)
- 移動互聯網軟件開發實驗指導
- JavaScript動態網頁編程
- Orleans:構建高性能分布式Actor服務
- Java程序設計與項目案例教程
- Android 游戲開發大全(第二版)
- DevOps 精要:業務視角
- Qt 5.12實戰
- Spring Boot 3:入門與應用實戰
- Spring MVC Blueprints
- 秒懂算法:用常識解讀數據結構與算法
- Netty 4核心原理與手寫RPC框架實戰
- Pentaho Analytics for MongoDB Cookbook