第六章：讓後台看起來很貴 - 數據視覺化與實作圖表 (Charts)

一個高質感的企業管理後台 (Dashboard)，絕對不能一打開就只有呆板的 Data Table 表格和密密麻麻的數字。老闆和高階主管每天的時間很寶貴，他們沒有耐心去一行一行數今天有幾個人遲到。他們需要的是「一眼就能看懂的趨勢」。

如果我們能在後台的首頁最上方，放上一個「本週每日打卡人數統計」的漸層長條圖，或是「正常 vs 遲到比例」的立體圓餅圖。當老闆看到這個畫面的瞬間，他對這個系統的心理價值 (Perceived Value) 會立刻從「學生做的作業」飆升到「價值十萬的企業級 SaaS 軟體」。

這就是為什麼「數據視覺化 (Data Visualization)」是接案工程師必學的吸金絕招。

🎯 本章目標

認識 React 業界最紅、也是最容易上手的圖表庫：Recharts。
學習如何將生硬的 API 陣列資料，轉換成圖表看得懂的格式。
使用 Vibe Prompt 指揮 AI 生成酷炫、帶有互動動畫的數據圖表。
將圖表完美融合進我們的主版面 (Dashboard Layout) 中。

📈 第一步：認識與安裝 Recharts

在前端畫圖表是一門很深的學問。最底層的技術是利用 HTML5 的 <canvas> 或是使用 D3.js 畫幾何圖形。但那種寫法太底層了，光是畫一條線可能就要寫 50 行程式碼。

幸運的是，在 React 的生態系中，有一個名叫 Recharts 的開源套件統治了這個領域。它的特色是「極度簡單且具備宣告性」。你不需要寫複雜的數學座標，只要像寫平常的 HTML 標籤一樣，把 <BarChart> (長條圖)、<XAxis> (X軸) 拼裝在一起，圖表就自動畫好了，而且預設就自帶超滑順的動畫效果。

請在你的終端機 (確保在 Vite 專案目錄下) 輸入以下指令安裝：

npm install recharts

📊 第二步：請 AI 幫你畫一張趨勢長條圖

這時候又要發揮 AI 最擅長的「寫苦力活 UI 程式碼」的能力了。我們不需要自己去查 Recharts 的文件看要怎麼調顏色、怎麼設圓角，全部交給 Prompt！

🔥【Vibe Prompt 實戰咒語】 我剛剛安裝了 recharts。請幫我在 src/components 資料夾中建立一個 DashboardChart.tsx 元件。 需求如下： 1. 我要使用 recharts 畫一個長條圖 (BarChart)，用來顯示一週出勤狀況。 2. 請先幫我寫一個假資料陣列 mockData：包含一週七天，每天有「準時人數」與「遲到人數」兩個數字。 3. 圖表組件必須包含：XAxis (X 軸顯示星期)、YAxis (Y 軸顯示人數)、Tooltip (滑鼠懸停的黑色半透明提示框)、以及 Legend (右上角的圖例說明)。 4. 請把「準時」的長條設定為綠色 (#10B981)，「遲到」的長條設定為紅色 (#EF4444)。 5. (視覺細節) 為了讓它看起來現代且高級，請讓長條的頂部有圓角效果 (radius={[4, 4, 0, 0]})，並且將整個圖表包在一個有白色背景、淡陰影 (shadow-sm) 且有標題 "本週出勤趨勢" 的 Tailwind 卡片 div 中。 6. 圖表必須具備響應式 (ResponsiveContainer)，寬度為 100%，高度為 300px。

當你給出如此精確且帶有設計美感的指令後，AI 生成出來的程式碼會非常直觀且漂亮：

// 📂 src/components/DashboardChart.tsx
import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer, CartesianGrid } from 'recharts';

// 1. 準備給圖表吃的資料結構
const mockChartData = [
  { name: '週一', 準時: 45, 遲到: 5 },
  { name: '週二', 準時: 42, 遲到: 8 },
  { name: '週三', 準時: 48, 遲到: 2 },
  { name: '週四', 準時: 40, 遲到: 10 },
  { name: '週五', 準時: 49, 遲到: 1 },
];

export default function DashboardChart() {
  return (
    // 2. 用 Tailwind 打造的高級感卡片外框
    <div className="w-full bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
      <div className="mb-6">
        <h3 className="font-bold text-slate-800 text-lg">本週出勤趨勢</h3>
        <p className="text-sm text-slate-500">統計過去五個工作日的打卡狀況</p>
      </div>
      
      {/* 3. Recharts 響應式容器 */}
      <div className="h-[300px] w-full">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={mockChartData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
            {/* 加入淡淡的虛線背景網格 */}
            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E2E8F0" />
            
            {/* X 軸與 Y 軸設定 */}
            <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fill: '#64748B' }} dy={10} />
            <YAxis axisLine={false} tickLine={false} tick={{ fill: '#64748B' }} />
            
            {/* 互動元件 */}
            <Tooltip 
              cursor={{ fill: '#F1F5F9' }}
              contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
            />
            <Legend wrapperStyle={{ paddingTop: '20px' }} />
            
            {/* 資料長條本體，加上圓角 radius 讓它不那麼生硬 */}
            <Bar dataKey="準時" fill="#10B981" radius={[4, 4, 0, 0]} maxBarSize={40} />
            <Bar dataKey="遲到" fill="#EF4444" radius={[4, 4, 0, 0]} maxBarSize={40} />
          </BarChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}

把它放進你的後台主頁面 (Dashboard) 中。當你重新整理網頁時，你會看到那些綠色跟紅色的長條**「從底下優雅地長出來」** (這是 Recharts 內建的動畫)。當你把滑鼠游標移過去，還會浮現一個帶有陰影的黑色提示框，顯示精確的數字。

這就是 Vibe Coding 的魔力。你只花了一分鐘，就做出了月薪八萬的資深前端工程師才寫得出來的互動儀表板！

💼 [商業進階] 把真實資料轉換給圖表使用

在實戰中，你不能永遠用 mockChartData。你必須把上一章從 Axios 拿到的 punches 陣列，經過 JavaScript 的資料處理 (如 reduce 或是迴圈分組)，轉換成 Recharts 要求的 [{name: '週一', 準時: X, 遲到: Y}] 格式。

如果你覺得這段轉換邏輯太燒腦，沒關係，老規矩：「把原始資料的 JSON 格式貼給 AI，告訴 AI 你希望圖表長什麼樣子，請 AI 幫你寫出轉換函數 (Data Transformation Function)。」 這會是你以後在接案時，最常詠唱的咒語之一。

✅ 課程大總結 (Line Punch Web 結業)

狂賀！Course 5: Line Punch Web (打卡系統管理後台) 的 6 章課程到此告一段落！

回顧一下我們走過的路：

我們從 Line Developers 申請了專屬的 LIFF ID。
我們用 Vite + React 搭建了現代化的前端架構。
我們用 AI 實作了帶有即時搜尋與高顏值的 Data Table。
我們串接了 Axios 向 FastAPI 討資料。
我們戰勝了前端大魔王 CORS 跨域阻擋。
最後，我們畫出了具備高商業價值的 互動式圖表 (Charts)。

你現在已經具備了「獨立打造企業級 SaaS 服務後台」的強大實力！加上前面的 Line Bot 後端，這套系統完整的商業價值已經可以報價到台幣 8~10 萬元。

而在下一個系列 (也是我們課程的終極魔王關)，我們將帶你踏入 2026 年最前沿、最具爆發力的領域：多智能體協作 (CrewAI Multi-Agents)。我們將教你如何寫 Python，召喚一群虛擬的 AI 員工，讓他們互相對話、互相合作，幫你自動完成行銷與營運工作。

準備好體驗當「虛擬 AI 公司大老闆」的快感了嗎？我們下個系列見！