資料視覺化工具 EP3. 拆解圖形與資料的『比較』關係(上)

EP3.拆解圖形與資料的『比較』關係(上)

系列文 | Jones 2019-9-17

前言


上一篇 《EP2. Smart eVision資料視覺化七種資料類型大公開!》, 介紹了透過資料關係與視覺化元件的搭配,選擇出適合自己資料的視覺化元件。接下來,這篇開始會跟大家介紹屬於「比較」類性質的資料關係圖形,在Smart eVision 適合用的視覺化元件與圖形,並介紹其中的效果與應用。

「比較」:主要強調大小,將同類型的個體擺放在相同衡量的維度單位上, 能夠清楚看出其對應的大小關係,適合呈現的圖形如下。在 Smart eVision 中每種圖形都有多種圖形模式可以選擇(例如:簡易 模式、資料標籤 模式、資料類別 模式、子母視窗 模式),設計者選好要顯示的資料與圖形就可以快速套用,減少設定步驟 。


1. 直條圖
2. 堆疊直條圖
3. 100%堆疊直條圖
4. 堆疊區域圖
5. 100% 堆疊區域圖
6. 橫條圖
7. 堆疊橫條圖
8. 100% 堆疊橫條圖
9. 對稱橫條圖

「比較」資料常使用的圖表如下:




  1. 直條圖(視覺化控制項>Chart):
  2. 直條圖是將數量以長條圖(bar)的形式具體表現。因為直條圖的長度及寬度很適合用來表現數量上的變化,直條圖較容易解讀差異小的數值,下圖就是利用直條圖搭配不同的設計模式快速套用的呈現效果。

    直條圖(視覺化控制項>Chart)




  3. 堆疊直條圖(視覺化控制項>Chart):
  4. 適合將數量上的變化趨勢以「堆疊」的方式比較,堆疊直條圖呈現各項目的總累積數值,想要看詳細的數值,滑鼠移過去可以顯示詳細的數值(如下圖所示)各項目可以進行自行設定想要呈現顏色,對於企業中有針對不同項目設定固定顏色定義時,能快速設定。

    堆疊直條圖(視覺化控制項>Chart)




  5. 100%堆疊直條圖(視覺化控制項>Chart):
  6. 將數量上的變化趨勢換算成總類別合為100%後相比較,100%堆疊直條圖適合用來比較相同項目的比例, 使用者想要更詳細的數值,透過勾選套用資料列表顯示模式,就能直接顯示詳細數值,方便使用者比較。

    100%堆疊直條圖(視覺化控制項>Chart)




  7. 堆疊區域圖(視覺化控制項>Chart):
  8. 以山形的推移變化來比較數個資料,堆疊區域圖呈現隨著時間推移各項目的總累積狀況,因為區域圖資料常會有重疊的情形產生,所以區域圖圖形會多一種透明度模式可以快速套用,讓各類別區域圖顯示在畫面上顯示,方便比較各項目總累積狀況

    堆疊區域圖(視覺化控制項>Chart)




  9. 100% 堆疊區域圖(視覺化控制項>Chart) :
  10. 在 100% 的總和下比較數個資料相對數值,若要使用區域圖,就必須明確的定出何者為比較的主體,百分比推疊區域圖適合用來比較相同項目的比例。

    100% 堆疊區域圖(視覺化控制項>Chart)




  11. 橫條圖(視覺化控制項>Chart):
  12. 若要從上到下表現出各項目的縱向排列比較,條列式是最適合的圖表。另一個原因,假如要比較的項目名超長,直條圖下方的空間很難塞的下去。橫條圖較容易解讀差異小的數值,特別適合項目多或名稱長時使用,遇到差異數值太接近用圖表分不出來,也可以勾選資料標籤,讓圖表顯示數值,並可以調整圖表中細節,例如:設計數值的字型顏色、大小,調整成使用者適合閱讀的呈現。

    橫條圖(視覺化控制項>Chart)




  13. 堆疊橫條圖(視覺化控制項>Chart):
  14. 堆疊橫條圖呈現各項目的累積數值,將數量的大小由上而下(或相反)排列,但要加註內容說明(季別),讓使用者知道各顏色代表什麼,顏色設定除了可以針對各單一項目設定,可以利用顏色主題,我們提供 16 種顏色主題,讓設計者選擇。

    堆疊橫條圖(視覺化控制項>Chart)




  15. 100% 堆疊橫條圖(視覺化控制項>Chart):
  16. 百分比推疊橫條圖適合用來比較相同項目的比例。要表現年代的變遷、地區間差異時,也就是說橫條圖,並不是以A位主來進行B與C的比較,也不區分項目間的優劣,而是時候多項目間的比較(例如產業構造等並列式的排列)。

    100% 堆疊橫條圖(視覺化控制項>Chart)




  17. 對稱橫條圖(視覺化控制項>Chart):
  18. 對稱橫條圖適用於對比兩類事物在不同特徵項目的數據情況。

    對稱橫條圖(視覺化控制項>Chart)

下一篇,將會為各位介紹,拆解圖形與資料的『比較』關係(下),敬請期待!透過 Smart eVision 商業智慧BI工具能協助您快速完成設計,使用者也可以輕鬆理解資料,讓資料視覺化可以輕鬆完成。

如果想要看實際頁面呈現效果,可以點選➽範例展示,加入聯銓會員即可免費觀看,我們不定時還會寄送聯銓相關資訊給您!

YouTube影片介紹,可以點選➽Smart eVision視覺化元件系列】EP1 比較類(上),可免費觀看,訂閱我們不定時還會寄送聯銓相關資訊給您!

下一篇將會開始介紹,上述七種關係的視覺化元件,在 Smart eVision 呈現更細部的功能特色效果與變化 ,讓資料視覺化這件事能更加清楚理解 ,敬請期待!


此篇分類於:#SmarteVision #資料視覺化 #資料視覺化元件 #資料視覺工具 #資訊圖表 #比較 #直條圖 #堆疊直條圖 #100%堆疊直條圖 #堆疊區域圖 #100% 堆疊區域圖 #橫條圖 #堆疊橫條圖 堆疊橫條圖 #100% 堆疊橫條圖 #對稱橫條圖


更多Smart eVision學習資訊

我們的官方網站

我們的臉書粉絲團

我們的官方YouTube頻道