階梯折線圖

概述

階梯折線圖以階梯狀圖案呈現離散的瞬間變化，以及變化之間的恆定時期。與平滑或直線不同，階梯線永遠不暗示漸進的過渡 — 數值不是舊的就是新的，沒有中間值。

何時使用

顯示狀態變更或狀態過渡（啟用/停用、上線/離線）
呈現在明確更新之間保持恆定的數值
視覺化離散事件：價格變更、庫存補貨、方案升級
強調每次變更的精確時間點
當資料點之間的插值會產生誤導時

不適用

連續量測如溫度或重量（優先使用基礎折線圖或平滑折線圖）
平滑過渡更精確或更有意義時
每隔幾秒就有變化的極密集資料（階梯會變成模糊一片）

關鍵變體

階梯位置：起始（start）、中間（middle）或結束（end）
搭配面積填色以呈現累積效果
多序列並列的狀態比較
在每個變更點加標註
色彩區段表示狀態類別（如：紅/綠表示閾值）

使用情境

定價：SaaS 訂閱層級、電力費率時段、股票每日收盤價
庫存：每次出貨或銷售後的倉庫存量
基礎設施：伺服器狀態（運行/停機/降級）、功能旗標部署
金融：央行利率決議、股利公告
醫療：藥物劑量調整、病患狀態轉換（穩定/危急/出院）
製造：機器運行模式（閒置/運轉/維護）、批次處理狀態
物流：物流狀態推進（待處理 → 已出貨 → 運送中 → 已送達）

在折線圖產生器中快速設定

準備 CSV 資料，欄位包含 x（時間戳或類別）、y（數值）、series（選填）。
貼上或上傳資料。
選擇「Line」圖表類型並設定 step: "start"（或 "middle" / "end"）。
隱藏點標記以獲得更乾淨的階梯外觀。
調整色彩並在關鍵變更點新增標註。
匯出為 PNG/SVG 或分享即時連結。

資料（CSV）

x,y,series
Mon,120,Step Start
Tue,132,Step Start
Wed,101,Step Start
Thu,134,Step Start
Fri,90,Step Start
Sat,230,Step Start
Sun,210,Step Start
Mon,220,Step Middle
Tue,282,Step Middle
Wed,201,Step Middle
Thu,234,Step Middle
Fri,290,Step Middle
Sat,430,Step Middle
Sun,410,Step Middle
Mon,450,Step End
Tue,432,Step End
Wed,401,Step End
Thu,454,Step End
Fri,590,Step End
Sat,530,Step End
Sun,510,Step End

圖表設定（JSON）

效能提示

階梯折線在中等資料密度（10–500 個點）下效果最佳
面對非常大的資料集，只保留關鍵變更點（跳過連續相同的值）
可搭配低不透明度面積填色以強調「保持」值的範圍

常見問題

階梯位置（start、middle、end）有什麼差別？

Start（起始）：水平線段先出現，然後是垂直階梯。適合在每個期間開頭就改變的值（如：開盤價、班次起始狀態）。
Middle（中間）：階梯在中點發生，產生平衡的階梯效果。適合表示區間內的平均或典型值。
End（結束）：垂直階梯先出現，然後是水平線段。適合期末數值（如：收盤價、日終庫存）。

何時應該用階梯折線而非一般折線？ 當數值在離散變更點之間保持恆定，且點與點之間的任何插值都會產生誤導時。常見信號：你的資料代表狀態、層級、閾值或離散決策，而非連續量測的數量。

階梯折線上該顯示資料點嗎？ 通常不需要 — 階梯本身就清楚標記了過渡。但在稀疏的資料集中，或當你想突顯特定事件（如漲價或狀態變更）時，在變更時刻顯示點標記會很有幫助。

階梯折線如何處理缺失資料？ 階梯折線會在缺失點處產生間隙，誠實地表示資料不可用。這通常比插值更好，因為階梯資料代表不應被估計的離散狀態。

可以在同一張圖上混合階梯折線與一般折線嗎？ 可以。常見的模式是用階梯線表示實際狀態（如定價層級），疊加平滑線表示連續指標（如使用量）。使用明顯不同的視覺風格 — 實線階梯 vs 虛線平滑，或不同色彩 — 讓讀者能區分兩者。

如何用色彩編碼呈現多種狀態？ 使用 visualMap 或條件樣式，根據數值範圍為線段上色。例如：綠色代表「達標」，黃色代表「警告」，紅色代表「危急」。這在閾值監控看板中特別有效。

Example

Guide

概述