Data

從 Chart 到 Chat - 基礎知識

要理解一張圖表，不應該只關注圖表的外觀或使用哪一種 Chart Type，而是需要從圖表的基本組成、規格定義及資料視覺化的設計面向進行思考。

更新於 2026-11-03發布於 2026-11-03閱讀時間 10 分鐘

摘要

要理解一張圖表，不應該只關注圖表的外觀或使用哪一種 Chart Type，而是需要從圖表的基本組成、規格定義及資料視覺化的設計面向進行思考。

本文將從三個方向整理：

1. 基本資訊（Chart Anatomy）：了解一張圖表包含哪些基本元素。
2. 圖表規格（Chart Specification）：理解圖表的資料、視覺映射及相關設定如何組織。
3. 五層面向思考：從 Data Structure、Transformation、Visual Encoding、Statistical Layer、Interaction 分析圖表的設計與擴充能力。

基本資訊

圖表規格

圖表規格（Chart Specification）用來描述一張圖表所需要的資料、視覺映射、比例尺、資料處理及互動行為。以下結構是為了方便理解圖表組成所整理的概念性分類，並非所有圖表函式庫都採用完全相同的規格。

Chart Specification
│
├── Context
│   ├── Title
│   ├── Description
│   ├── Data Source
│   └── Time Range
│
├── Data
│   ├── Dimension
│   ├── Measure
│   ├── Series
│   └── Category
│
├── Encoding
│   ├── X
│   ├── Y
│   ├── Color
│   ├── Size
│   └── Shape
│
├── Scale
│   ├── Domain
│   ├── Range
│   ├── Scale Type
│   └── Tick
│
├── Transformation
│   ├── Filter
│   ├── Sort
│   ├── Group
│   ├── Aggregate
│   └── Bin
│
└── Interaction
    ├── Tooltip
    ├── Zoom
    ├── Brush
    ├── Select
    └── Drill Down

五層面向思考

分析圖表的能力時，可以從 Data Structure、Transformation、Visual Encoding、Statistical Layer、Interaction 五個面向進行思考。

其中 Data Structure 與 Visual Encoding 是理解資料如何被視覺化的核心；Transformation 則依據資料是否需要轉換、整理或聚合而決定。

Statistical Layer 與 Interaction 不一定是每張圖表都需要的，但部分圖表本身依賴統計計算，例如 Box Plot；互動功能則根據使用情境決定。

這五個面向並非固定的執行順序，而是協助分析圖表設計與進階能力的思考框架。

Data Structure

資料結構(Data Structure)它描述的是資料本身的結構與語意。例如以下資料有哪些欄位？分別又是對應到什麼角色？

• Dimension：月份、產品
• Measure：營收

Transformation

資料轉換(Data Transformation)則在說明資料要如何處理，因為原始資料(Raw Data)不一定能直接畫在圖表上，則需透過 Transformation 進行處理。

在上述中已經把 Dimension、Measure 分類出來，那又可以如何顯示在圖表上？

例如看每個月總營收：

原始資料
↓
Group By 月份
↓
SUM(營收)
↓
得到

1月 → 300
2月 → 390

而 Transformation 可操作範圍還有以下：

Visual Encoding

視覺編碼(Visual Encoding)這層非常重要，是將資料映射成視覺屬性的過程，讓使用者能透過圖形理解資料。按照第一層資料結構分類出的月份及營收就可作為圖表上 X Position 及 Y Position。

Visual Encoding 又包含以下視覺屬性

Statistical Layer

統計分析層(Statistical Layer) 上述有說到是其一非必要的，這一層面向說明的是要不要從資料中推導出額外資訊，會透過統計方法，從資料中計算、歸納或推導出更有分析價值的資訊，並將結果呈現在圖表中，如從 Raw Data 中推出的 Dimension 及 Measure 只可畫出基礎的 Bar Chart，但需要更詳細的 Moving Average、Growth Rate 等資訊，就關於該層的操作。

可將統計分析分成五個方向：

不同圖表對 Statistical Layer 的需求

Interaction

互動層(Interaction)顧名思義就是使用者如何與圖表進行互動，透過操作來探索、篩選、比較或深入分析資料，像是 Tooltip、Hide Series、Click Bar 等操作。更簡單來說讓使用者不只是觀看圖表，而是能主動探索資料、取得更多資訊。

Interaction 也可分成五個面向

與其他面向的關係

Interaction 不一定只影響圖表的外觀，也可能改變資料處理方式。

使用者操作（Interaction）
    │
    ├── Hover
    │     └── 顯示 Tooltip
    │
    ├── Select
    │     └── Highlight（Visual Encoding）
    │
    ├── Filter
    │     └── 重新篩選資料（Transformation）
    │
    └── Drill Down
          └── 取得或轉換更細層級資料
                └── 更新 Visual Encoding

因此 Interaction 可以觸發 Transformation、Visual Encoding，甚至更新 Statistical Layer 的結果。

例如在 Line Chart 中，使用者篩選某個時間區間後，平均值、趨勢線可能需要依照新的資料範圍重新計算。這說明了 Interaction 與 Statistical Layer 之間的緊密關聯，使用者的操作會直接影響統計分析的結果，進而改變圖表的呈現。