資料視覺化
規則
- Recharts 用於標準 React 圖表 — 可組合、有型別、開箱即用的響應式
- Nivo 用於豐富互動圖表（熱力圖、樹狀圖、桑基圖）— 宣告式 API，內建動畫
- D3 僅用於自訂/新穎的視覺化 — 使用 React refs，不要讓 D3 管理 DOM
- 務必包裹在
<ResponsiveContainer width="100%" height={300}>中 — 永遠不要硬編碼像素尺寸 - 色彩調色盤：使用色盲安全的調色盤（例如 Tableau 10、ColorBrewer）— 永遠不要單獨依賴紅/綠色
- 座標軸格式：人類可讀的數字（1.2K、$3.4M），若類別超過 8 個則旋轉標籤
- 提示框：懸停時顯示精確數值，包含單位與地區感知格式
- 圖例：放置在圖表區域外部，使用清楚標籤 — 若僅有一個數列則隱藏圖例
- 載入狀態：渲染與圖表形狀相符的骨架 — 而非一般的旋轉圈
- 在父元件中取得資料，以 props 傳遞給圖表 — 永遠不要在圖表元件內部擷取資料
- 對於 SEO 儀表板，使用 YepAPI 端點資料（頁面稽核分數、關鍵字趨勢、反向連結成長）作為圖表資料來源
- 暗色模式：定義一個包含背景、網格、文字與數列色彩的主題物件 — 根據主題上下文切換
圖表類型選擇
- 折線圖：隨時間變化的趨勢（流量、營收）
- 長條圖：類別比較（頁面分數、關鍵字數）
- 面積圖：累積體積（反向連結總數隨時間變化）
- 圓餅圖/甜甜圈圖：整體中的部分，最多 5 個區塊 — 將小數值分組為「其他」
- 熱力圖：二維資料密度（按小時和日的流量）
- 漏斗圖：轉換步驟與流失率
避免
- 3D 圖表 — 它們會扭曲資料感知
- 超過 5 個區塊的圓餅圖 — 改用水平長條圖
- 缺少座標軸標籤或上下文的圖表 — 務必提供單位與時間範圍
- 每次重新渲染都播放動畫 — 僅在初次載入或資料變更時播放動畫