用圖表回答營運問題

專案情境

客服主管每天需要知道：目前有多少未處理案件？哪個佇列等待最久？團隊是否達到 SLA？我們會用摘要卡、排序條圖、折線圖和表格回答四種不同問題。

1. 先定義資料

type QueueMetric = {
  queue: string;
  open: number;
  medianWaitMinutes: number;
  slaRate: number;
};

const queues: QueueMetric[] = [
  { queue: '付款', open: 42, medianWaitMinutes: 18, slaRate: 0.94 },
  { queue: '帳號', open: 28, medianWaitMinutes: 7, slaRate: 0.98 },
];

資料層先定義單位、時間範圍和更新時間，圖表才不會各自解讀欄位。

2. 選圖表

不要為了展示套件功能而使用圓餅圖或 3D 圖。每一張圖都應有一句結論。

3. 建立可理解的圖表

SLA 達成率（過去 7 天）
目前 96.2%，比上週下降 1.4 個百分點。
資料更新時間：2026-08-02 14:00

圖例、軸標籤和 tooltip 都要包含單位；數值不能只用顏色或位置表達。對無法使用圖表的使用者提供同一份表格或文字摘要。

4. 處理狀態

儀表板要實作載入、沒有資料、資料過期、局部錯誤和重試。圖表載入時可以保留區塊尺寸，避免整頁跳動；API 失敗時說明是哪一張圖表失敗。

5. 響應式與驗收

桌面可同時顯示 KPI 和圖表；手機將 KPI 改成水平滑動或單欄，條圖和表格不要被壓到無法讀取。驗收時檢查鍵盤、螢幕閱讀器、色彩差異和資料更新時間。

延伸練習

加入「匯出 CSV」和「只看高風險佇列」功能，並說明篩選條件如何被保存和分享。