Claude Code 資料視覺化教學:圖表與儀表板一鍵生成

文章屬性:教學實戰
適用系統:Claude Code 支援的作業系統皆可安裝;此外掛主要為 Claude Cowork 設計
難易度 / 耗時:入門 / 約 10 分鐘
核心結論:網路上流傳的 /dataviz 是誤傳,官方沒有這個指令;正解在 Anthropic 官方 Data 外掛,本文含兩指令的選用判準與官方資料量上限。
適用對象:想把 SQL 結果、CSV 直接變成圖表或儀表板,但不想自己刻 matplotlib 與 Chart.js 的人

📌 快速答案

一句話答案:Claude Code 資料視覺化要靠官方 Data 外掛,安裝後用 /create-viz 產出 Python 靜態圖表、用 /build-dashboard 產出可離線開啟的互動 HTML 儀表板。

🧰 開始前的準備

系統需求:已安裝並可登入的 Claude Code;此外掛在 Claude Cowork 亦可使用
權限需求:一般使用者即可,不需系統管理員
需要工具:Anthropic 官方 Data 外掛;要跑 /create-viz 的靜態圖需本機有 Python(matplotlib、seaborn、pandas)
預計耗時:安裝約 1 分鐘,產第一張圖約 5 分鐘
難度門檻:會在終端機打一行指令就夠,不需要懂 matplotlib

🔍 為什麼你需要這個?

你手上有一份 SQL 撈出來的結果,或是一個 CSV,老闆下午要看趨勢。傳統做法是丟進 Excel 拉圖、或自己寫 matplotlib 慢慢調字級與配色,調完發現 Y 軸沒從零開始又得重來。

Claude Code 資料視覺化的價值就在這裡:把「選圖表型別、套設計慣例、產出檔案」這段重複勞動交給有明確規範的 skill,而不是每次重新下提示詞賭它這次會不會把長條圖畫成圓餅圖。

但這件事有個前提——你得先知道指令到底叫什麼。網路上流傳的名字是錯的,這也是本文要處理的第一件事。

🧭 先講清楚:官方沒有 `/dataviz` 這個指令

這是本文最需要先更正的一點:Anthropic 官方文件與官方外掛清單中,都不存在名為 /dataviz 的指令。

站長我查證時把三個地方都翻過:Anthropic 官方外掛頁 claude.com/plugins/data、官方 GitHub repo anthropics/knowledge-work-plugins 底下 data 外掛的 README 與各個 SKILL.md,以及 Claude Code 官方指令參考文件。官方 Data 外掛實際提供的是六個指令:

指令	用途
`/analyze`	回答資料問題,從快速查詢到完整分析
`/explore-data`	剖析資料集的形狀、品質與模式
`/write-query`	依你的 SQL 方言寫出最佳化查詢
`/create-viz`	用 Python 產出出版品質的視覺化圖表
`/build-dashboard`	產出帶篩選器與圖表的互動 HTML 儀表板
`/validate`	分享前替分析做方法論、正確性與偏誤檢查

誤傳是怎麼來的?合理的推測是:這個外掛內部確實綁了一個叫 data-visualization 的 skill(官方 README 的 Skills 表列得很清楚,和 sql-queries、interactive-dashboard-builder 等並列),但 skill 名稱不等於斜線指令名稱——更關鍵的是,該 skill 的 SKILL.md 標頭寫著 user-invocable: false,也就是它在設計上就不是給使用者用斜線叫的,而是由 Claude 在相關情境自行載入。二手整理的內容把 data-visualization 簡寫成「dataviz skill」,再被當成 /dataviz 指令流傳出去。

所以如果你在 Claude Code 打 /dataviz,不會有東西跑出來。要記的是 /create-viz 和 /build-dashboard 這兩個。

延伸一句:Claude Code 的 skill 是可以疊加呼叫的,官方指令文件寫明自 v2.1.199 起,/skill-a /skill-b 做某事 這種寫法會把開頭列到的 skill 全部載入,最多可串接六個。想讓視覺化指引疊上團隊自己的樣式規範 skill,是做得到的。

想先搞懂 skill 這套機制本身怎麼運作,可以先看站上這篇 Claude Skills 是什麼?Agent Skills 讓 AI 學會新技能的開放標準。

🛠️ 實戰步驟

步驟一:安裝官方 Data 外掛

Data 外掛由 Anthropic 官方製作並標記為 Anthropic Verified,在官方外掛頁上顯示的安裝數為 3,382(2026-07-20 查證)。它主要是為 Anthropic 的桌面代理程式 Cowork 設計,官方 README 同時載明在 Claude Code 也能用。

在終端機執行:

claude plugins add knowledge-work-plugins/data

裝完之後,上面那六個指令就會出現在你的斜線指令清單裡。

💡 為什麼要這樣做?外掛把「SQL 最佳實務、圖表選型、儀表板版面」這些領域知識包成 skill,只有在你叫到它的時候才載入內容。這跟把一大段規範塞進 CLAUDE.md 相比,平常不佔用 context。

步驟二:用 `/create-viz` 產出靜態圖表

/create-viz 的定位是「出版品質的靜態圖」——給簡報、給報告用的 PNG。

用法是指令後面直接接資料來源與需求:

/create-viz Show monthly revenue for the last 12 months as a line chart with the trend highlighted

資料哪裡來?官方列了三種情境:資料倉儲已連線就直接查詢後載入 pandas DataFrame;資料是貼上或上傳的就先解析成 DataFrame 並做型別轉換與空值處理;如果是對話中前面分析過的資料就直接沿用。沒有接資料倉儲也能用,貼上 SQL 結果或上傳 CSV / Excel 即可。

比較有價值的是它內建的圖表選型對照。你沒指定型別時,它會依資料關係推薦,並簡短說明為什麼:

資料關係	建議圖表
隨時間變化的趨勢	折線圖
跨類別比較	長條圖(類別多時用水平)
部分對整體的組成	堆疊長條或面積圖
數值分布	直方圖或箱型圖
兩變數相關性	散佈圖
排名	水平長條圖

函式庫方面,官方把 matplotlib + seaborn 設為預設(靜態、出版品質),你明講要互動才改用 plotly。輸出是 dpi=150 的 PNG,存到當前目錄,而且會把程式碼一併給你,方便自己再改。

步驟三:用 `/build-dashboard` 產出互動儀表板

/build-dashboard 產出的是單一自帶內容的 HTML 檔,用瀏覽器直接開,不需要架伺服器、也不必安裝任何套件。

/build-dashboard Monthly sales dashboard with revenue trend, top products, and regional breakdown

官方定的版面是一套標準樣式:頂部 2–4 張 KPI 卡放頭條數字,中段 1–3 張圖表放趨勢與拆解,底部選配一張可排序的明細表,篩選器依複雜度放在頁首或側欄。

技術上,圖表用 Chart.js(官方範本以 CDN 載入 4.5.1 版並帶 SRI 完整性雜湊),資料以 JSON 直接內嵌在 HTML 裡,不需要任何外部資料請求——這也是它最實際的好處:整份儀表板就是一個檔案,寄給誰都能開。要注意的是官方範本的圖表函式庫是走 CDN 載入,所以首次開啟仍需連網,真要完全離線得自行把函式庫改成內嵌。互動的部分包含下拉與日期區間篩選器連動更新所有圖表與表格、表頭點擊排序、圖表 hover 提示,以及數字格式化。

驗證結果

/create-viz 跑完,當前目錄會多一個 PNG,並且對話中會附上產生它的 Python 程式碼。/build-dashboard 跑完會產出一個 .html,官方流程是直接用你的預設瀏覽器開啟確認渲染正常。兩者都會給你後續調整或換資料的說明。

⚖️ 兩個指令怎麼選?

判準很單純:要放進投影片或文件的,用 /create-viz;要讓別人自己點、自己篩的,用 /build-dashboard。

/create-viz 與 /build-dashboard 對照表:產出格式、技術堆疊、互動性、最適場合與資料量指引 — 來源:Anthropic 官方 data 外掛 README 與 SKILL.md,2026-07-20 查證

再細一點:/create-viz 適合單一訊息、需要精修排版的圖——它的設計規範也是往這個方向走,像是標題要寫出洞見而不是只寫指標名稱(官方舉的例子是寫「營收年增 23%」而不是「各月營收」)、長條圖 Y 軸必須從零開始、類別依數值排序而非字母排序、用色盲友善色盤且顏色要有意義而非裝飾。

/build-dashboard 則適合多個指標要一起看、而且讀者會想自己切維度的場合。但它是時間點快照,不是即時儀表板——官方明講要即時的話應該去接 BI 工具。

📊 別忽略資料量天花板

這是多數教學不會提、但會直接決定你做出來的東西能不能用的部分:官方替儀表板列了明確的資料量分級。

資料量	官方建議做法
< 1,000 列	直接內嵌,完整互動
1,000 – 10,000 列	仍可內嵌,圖表可能需先彙總
10,000 – 100,000 列	需先彙總,只內嵌彙總後結果
> 100,000 列	不適合前端儀表板,請改用 BI 工具或分頁

圖表本身也有效能上限:折線圖每個系列建議 500 點以內(超過就降採樣)、長條圖 50 個類別以內、散佈圖上限約 1,000 點;圖多的儀表板建議關掉動畫,篩選觸發的更新用 Chart.update('none') 而不是完整重繪。表格則建議一次顯示 100–200 列,再多就加分頁。

換句話說,別想著把五萬列原始資料丟進去讓瀏覽器自己算。官方直接示範了正確做法:先彙總成十二列月營收再內嵌,而不是內嵌五萬列原始訂單。

如果你的目標是讓 Claude 直接連上資料倉儲來源源不絕地查,那要處理的是連線層,可以參考 MCP 是什麼?Model Context Protocol 讓 AI 接上你的工具與資料——Data 外掛官方文件也是建議用 MCP server 去接 Snowflake、Databricks、BigQuery 這類倉儲。

❓ 常見問題

Q:那 /dataviz 到底存不存在?我看到有教學這樣寫

官方沒有這個指令。Anthropic 官方外掛頁、官方 GitHub repo 的 README 與 SKILL.md、Claude Code 官方指令文件都查不到 /dataviz。要用的是 /create-viz(靜態圖)與 /build-dashboard(互動儀表板)。外掛內部確實有一個叫 data-visualization 的 skill,推測是名稱被簡寫後誤傳成指令。

Q:沒有資料倉儲可以用嗎?

可以。官方明列在沒有倉儲連線時,可以貼上 SQL 執行結果,或上傳 CSV / Excel 檔讓它分析與繪圖;也可以請它先寫好 SQL 讓你自己去跑,再把結果貼回來分析。

Q:這個外掛只能在 Claude Code 用嗎?

不是。官方 README 寫明它主要是為 Cowork(Anthropic 的桌面代理程式)設計,但同樣可以在 Claude Code 使用。

Q:產出來的儀表板可以直接寄給同事嗎?

可以,這正是它的設計目標。所有資料以 JSON 內嵌在 HTML 內、圖表函式庫走 CDN,檔案本身自帶內容,對方用瀏覽器開就能看,不必架站。但也因為資料是內嵌的,寄出去前記得確認裡面沒有不該外流的數字。

🔗 延伸閱讀

📎 參考資料來源

📖 第一級|廠商官方:

Data – Claude Plugin(Anthropic 官方外掛頁) — 2026-07-20 查證
anthropics/knowledge-work-plugins — data/README.md — 2026-07-20 查證
anthropics/knowledge-work-plugins — data/skills/create-viz/SKILL.md — 2026-07-20 查證
anthropics/knowledge-work-plugins — data/skills/build-dashboard/SKILL.md — 2026-07-20 查證
Claude Code Docs — Commands(指令參考) — 2026-07-20 查證

⚠️ 本文核心事實以第一級為準;本文為官方文件查證整理,非站長第一手實測。

📅 本文查證戳記:2026-07-20 依 Anthropic 官方外掛頁、官方 GitHub repo 之 README 與 SKILL.md、Claude Code 官方指令文件查證撰寫。
若你在後續版本遇到指令名稱或行為變動,歡迎在留言區回報,站長會更新文章。