長條圖：用 Chart.js 畫銷售數據

你會學到

• 選擇水平/垂直柱狀圖的時機
• 使用資料集比較不同通路銷售額（官網、App、門市）
• 快速調整顏色、標籤與格式

為什麼用長條圖？

• 比較量的大小最直覺，適合單月多通路銷售對比
• 顯示排序後，讓「主力通路」一眼可見

Demo：單月通路銷售柱狀圖

場景：3 月 91APP 三大通路銷售。

Demo：水平排序柱狀圖（最佳渠道排序）

練習（視覺驗證）

1. 將「門市」銷售提高到 380，確認排序是否改變。
2. 在圖表上顯示數值：為 dataset 加上 dataLabels？先嘗試用 tooltip，再加 plugins: { legend } 觀察差異。
3. 嘗試增加一組資料集，呈現「去年同期」對比（顏色要明顯區分）。

練習題

AI 協作：學了這個，跟 AI 怎麼配合？

長條圖是最直覺的圖表類型。AI 可以一行程式畫出來，但標題和配色你要調整。

你的人類優勢：

• 你知道哪些類別要放進去、排序方式（按大小 vs 按字母）
• 你能判斷圖表的標題、顏色、標注是否讓非技術人看得懂

可以這樣跟 AI 說：

幫我用 Chart.js 畫一個長條圖，X 軸是商品類別、Y 軸是銷售額，按銷售額從高到低排列。