戰情室儀表板：Claude Code從0到1新手教學

戰情室儀表板是企業有效的管理工具，將所有決策相關圖表放在一起。本文介紹如何把 Excel 明細交給 Claude Code，直接生成可在瀏覽器互動的 HTML 分析圖表網頁。從能力測試、範例確認，到導入一萬六千筆真實採購資料，這篇記錄完整對話流程，讀完就能照著建立自己的企業戰情室。

一、詢問 Claude Code 能否直接生成分析圖表

在 Claude Code 的桌面工作環境中，贊贊小屋送出這樣一段問句：「我電腦現在有 Node.js 了，也有請你幫忙建立過 Html 下載簡報頁面，它是一個像網頁的文件。請問能夠直接生成一個有分析圖表的網頁？」Claude 的回應乾脆，說「可以！我可以直接幫你生成一個包含分析圖表的 HTML 網頁，完全不需要任何伺服器，用瀏覽器打開就能看」，並列出常見做法是用「Chart.js」，能做折線圖、長條圖、圓餅圖、雷達圖等互動圖表，滑鼠懸停即顯示數值，還能做多組資料比較。Claude 接著請贊贊小屋提供三個資訊：要分析什麼資料、資料內容是什麼、想要哪種圖表。

Chart.js 之所以是 Claude 生成戰情室儀表板的首選，在於它是純前端函式庫，輸出的單一 HTML 檔案用瀏覽器雙擊就能執行，不需要架設任何伺服器環境，非常適合「做完直接分享」的職場場景。對於電腦已有 Claude Code 環境的使用者來說，技術條件其實早就到位，真正的關鍵反而是能不能清楚說出「資料是什麼、想看什麼、希望怎麼呈現」，這才是決定成果好壞的地方。Claude Code 是什麼的完整說明，可以先看這篇暖身。

二、先看範例：一句話Claude 生成 5 種圖表

確認可行之後，贊贊小屋直接下了一句很短的指令：「先做一個範例我看看？」Claude 回應「好，我來做一個漂亮的範例頁面，包含幾種不同圖表」，畫面上出現「Created chart_demo.html +276 -0」，代表新增了 276 行 HTML 程式碼。Claude 接著說「檔案已建立在桌面，讓我開啟預覽確認畫面正常」，確認渲染無誤後，告知範例包含頂部「KPI 卡片」一目瞭然、「折線圖」呈現月度營收趨勢、「甜甜圈圖」顯示產品類別占比、「分組長條圖」比較各區域季度業績，以及「雷達圖」呈現客戶滿意度五面向比較，並說明「你只需要用瀏覽器雙擊打開就能看到完整互動效果（滑鼠懸停會顯示數值）」。

「先做一個範例我看看？」這句話值得記下來當提示詞模板。在請 Claude 處理任何複雜輸出之前，先要求一個示範版本，可以快速確認 AI 對需求的理解方向是否正確，避免花大量時間生成完整版後才發現方向跑偏。這個習慣在軟體開發圈稱為快速原型驗證，遷移到 AI 工作流同樣適用：小範圍試跑，確認方向，才放真實資料進去。Claude Code 玩法整理了更多這類實用的操作模式。

三、業績分析儀表板：示範頁面效果確認

瀏覽器開啟後，網址列顯示「/Users/zanzan/Desktop/chart_demo.html」，頁面標題「業績分析儀表板」，副標「資料期間：2025年1月—12月」。頂端 KPI 卡片區橫排四個核心指標：年度總營收「$8,420萬」附上「↑ 12.4% 較去年」，毛利率「38.6%」附「↑ 2.1% 較去年」，新增客戶數「1,248」附「↑ 8.7% 較去年」，客訴率「2.3%」附「↑ 0.4% 較去年」（客訴率是此儀表板中數值越低越佳的指標）。KPI 卡片下方左側是月度營收折線圖，同時呈現 2025 年實線與 2024 年虛線走勢，右側甜甜圈圖顯示主力產品 A、產品 B、服務收入、授權費、其他的產品類別占比結構。

頁面再往下，左半部是「各區域業績比較」分組長條圖，以北部、中部、南部、海外四種顏色對應 Q1 至 Q4 的季度銷售，右半部是「客戶滿意度指標」雷達圖，五個軸線分別是產品品質、交貨速度、售後服務、價格競爭力、溝通效率，藍色實線代表 2025 年、虛線代表 2024 年，哪個面向有進步、哪個面向退步，一眼就能看出差異。這份範例最重要的價值不只是好看，而是它證明了「單一 HTML 檔」也能做出接近商業儀表板的完整效果，確認技術路線可行之後，下一步才是換上真實資料。

四、準備真實資料：採購對帳 Excel 明細

範例確認之後，換上真實資料。贊贊小屋使用的這份 Excel 檔「3-3-2 交叉分析：視覺化圖表篩選器設定.xlsx」，是贊贊小屋課程中採購廠商對帳的明細教材，欄位涵蓋驗收單、採購單、料號、廠商型態、廠商編號、廠商名稱、數量、幣別、單價、匯率、原幣金額、本幣金額、採購員、日期、交易條件、年、月、產品，共 18 個欄位，右下角標籤貼紙標注「採購廠商對帳明細表 視覺化呈現分析條件」。Excel 本身已透過樞紐分析表建立了「In Detail」與「Overview」兩個分析頁面，底部工作表標籤列出「1. 採購報表、2. 插入篩選器、3. 多重選取、4. 篩選器格式、5. 多篩選器、6. 篩選器設定、7. 多樞紐分析」等多個教學步驟，後面還有測驗題、測驗報表、參考答案等工作表。

這份資料的欄位設計本身就是一個好示範：幣別與匯率分開存放便於換算，年月欄位已獨立拆出便於時間序列分析，驗收單與採購單各有獨立編號便於追蹤，代表它同時具備時間、產品、廠商、金額與人員等多個分析維度。過去要從這份明細做出互動式儀表板，需要綜合運用 Excel 樞紐分析表、插入篩選器、多重選取等許多技巧才能完成；現在有了 Claude Code 的協助，只要資料結構夠乾淨，就可以跳過繁瑣的手動拉取流程，讓 Claude 直接轉譯成具質感的網頁戰情室。想先了解環境設定與基本操作的讀者，可以先看Claude Code 試用這篇。

五、Claude 讀取資料：16,163 筆採購明細摸清楚

有了真實 Excel 之後，贊贊小屋傳入指令：「採購明細表準備好了，你先看看資料狀況。」Claude 回應「讓我看看桌面上的檔案」，執行「Ran List files on Desktop」找到後說「找到了，來看看內容」，接著「Ran 3 commands, used a tool」，讀取完成後整理出基本資訊：共「16,164 筆，期間 2020/01 ~ 2021/04（約 16 個月）」，其中 2020 年 12,166 筆、2021 年 3,997 筆；欄位結構 18 欄，逐一列出全部欄位名稱，「本幣金額」以粗體標示。

接著 Claude 呈現資料特徵表格，整理出幾個關鍵數字：產品方面筆電 8,211 筆、桌機 7,952 筆各約一半；廠商共 81 家以國內外部廠商為主 15,509 筆；幣別以台幣 15,905 筆為主，少量美金、日元；採購員共 7 人，小李佔比最高 12,348 筆；本幣採購金額合計約 2.48 億；最大廠商為丙伊 6,175 萬與未 t 3,221 萬。特別值得注意的是，Claude 主動標記了一個「小問題」：「產品欄有 1 筆異常值『16163』（看起來是誤植）」，原始資料共 16,164 筆，扣除這筆疑似誤植，後續儀表板以 16,163 筆有效明細呈現。讓 Claude 先看資料狀況，等於執行了一次自動化的資料側寫，傳統做法需要人工用 Excel 篩選或公式比對才能抓出異常值，現在 Claude 在讀取階段就同步完成第一道把關，確保後續圖表不會把錯誤一起視覺化。

六、下指令生成完整儀表板：自動除錯確認渲染

贊贊小屋只下了短短一句指令：「完整的儀表板」。Claude 隨即回應「好，我先把所有需要的數據提取出來，再一次生成完整儀表板」，執行「Ran Extract all chart data from Excel」與「Created a file, used 2 tools」後說「數據都齊了，現在來生成完整儀表板」。過程中 Claude 發現「預覽視窗太窄，讓我調整到桌面寬度再確認」，使用 4 個工具後說「視窗實際只有 404px 寬，強制設為 1280px」，繼續確認「正常了，版面完整，讓我再往下截圖確認圖表區域」，「圖表框架在但內容空白，來檢查下方圖表是否有渲染」，最終確認「所有 6 個圖表都有正確渲染（每個 canvas 都找到了對應的色彩像素）」，並說「讓我直接開啟瀏覽器確認完整效果」，整理出「採購分析儀表板.html」的完整結構：KPI 卡片顯示總採購金額、廠商數、採購筆數、採購人員，採購趨勢分析含月度採購折線圖與廠商型態甜甜圈，產品與廠商分析含堆疊柱與前 10 大供應商橫向條，採購員績效分析含分組柱與占比甜甜圈。關於 Claude Code 完整能力的官方說明，可以參考 Claude Code 概述。

Claude Code 在這裡展現的是「工具使用迴圈」：執行→觀察結果→判斷是否符合預期→自動修正→再執行，這種能在本機環境中實際執行、實際確認、實際修正的能力，正是 AI 代理與一般聊天機器人最大的差別，後者只是回答怎麼做，前者是真的連出錯都自己處理。即使一開始只給出較粗略的方向，Claude 也能先嘗試補齊執行細節，再依照結果逐步修正，不必像寫程式一樣事先規格化每一個步驟。Claude Code 自動模式的文章對這個機制有更詳細的拆解。

七、戰情室儀表板：採購明細分析儀表板完成

戰情室儀表板完成後，瀏覽器標籤頁從「業績分析儀表板」更新為「採購明細分析儀表板」，網址列顯示「/Users/zanzan/Desktop/採購分析儀表板.html」，頁面右上角標示資料期間「2020/01 — 2021/04」，副標「資料來源：採購明細表.xlsx」。頂端 KPI 卡片四格呈現：總採購金額「2.48億」本幣金額、供應廠商數「81」家（含關係人）、採購筆數「16,163」筆明細記錄、採購人員「7」位採購員。KPI 下方進入採購趨勢分析區塊，左半部是月度採購金額折線圖，各月本幣採購總額以萬元為單位，可見 2021 年初出現明顯低谷；右半部是廠商型態占比甜甜圈圖，顏色區分國內外部廠商、國內關係人、國外關係人、國外外部廠商四種型態。

這份戰情室儀表板把原本散在一萬六千多筆明細裡的資料，重新整理成管理者可以討論、可以判斷、可以追問的視覺語言。KPI 卡片先回答「規模多大」，月度折線圖回答「什麼時候有變化」，甜甜圈圖回答「廠商結構怎麼分布」，這種由大到小、由總到細的排版邏輯，正是戰情室儀表板有別於普通表格的核心價值。過去要做出這個層次的分析儀表板，需要綜合運用 Excel 的樞紐分析、篩選器、格式設定等多種技巧才能完成；現在透過 Claude Code 的協助，不只效率加倍，分析深度也跟著提升，而且輸出的是任何人用瀏覽器打開就能看、滑鼠懸停就能查數值的 HTML 檔案。更多這類應用可以參考AI 代理案例。

從篩選器到網頁，資料分析跨出那一步

這次測試最有意思的地方，是它不是從零發明一套新的分析流程，而是把 Excel 原本已有的分析思維，往網頁儀表板再推進一步。以這份採購明細來說，它在課程教學中已配合樞紐分析表、篩選器、多重選取做過完整的 Excel 示範；但這些操作的成果，往往最後是截圖進簡報，或者停在只有自己電腦才能互動的 xlsx 檔案裡。換成 HTML 儀表板之後，檔案可以直接傳給主管，用瀏覽器打開，滑鼠懸停就看到數值，跨部門溝通的成本明顯下降。

對職場工作者來說，這不代表以後不用學 Excel，而是 Excel 的價值會被延伸。真正的門檻不再只是會不會寫程式，而是能不能看懂資料結構、提出分析問題，並把想要呈現的方向說清楚。即便是 Claude Code 新手，也可以照著本篇的流程試一遍，把自己手上的 Excel 資料交給 Claude，看看它能轉出什麼樣的戰情室儀表板。這也是贊贊小屋多年教學下來的觀察：工具一直在進化，但「懂得提問、讀懂資料」的能力始終是核心，只是現在有了更好的工具，可以把這份能力更快地轉化出來。贊贊小屋整理的 Claude Code 大全集課程，涵蓋了更完整的實作流程，有興趣深入的讀者可以進一步參考。

學會計、學Excel、學習AI工具，歡迎加入贊贊小屋社群。

AI對未來工作的影響：黃仁勳GTC 2026十大啟示

Claude Code是什麼、ChatGPT怎麼用？、ChatGPT Excel教學、ChatGPT寫ExcelVBA、Gemini是什麼？、Notion教學、AI對會計的影響。

贊贊小屋AI課程：Claude Code、ChatGPT課程、AI工具全攻略、Notion課程。