SPARKLINE 迷你圖表系列（二）：堆疊長條圖
在上週我們介紹了怎麼用 SPARKLINE 函式製作折線圖，大家用得還習慣嗎？今天會繼續接著介紹怎麼用 SPARKLINE 函式製作「堆疊長條圖」：
就是右手邊這個橘色「進度條」的部分啦～
如果你在手機上看到這篇文章，覺得有興趣，我推薦你用方格子的收藏功能、先把它存起來，再到電腦上面打開來看看！另外，因為這次會用到上週介紹的 SPARKLINE 函式，建議你先讀過上次的內容再過來看看，會比較有概念喔。
歡迎到這邊參考 SPARKLINE 的各種應用方式：
- SPARKLINE 迷你圖表系列（一）：折線圖
- SPARKLINE 迷你圖表系列（二）：堆疊長條圖
- SPARKLINE 迷你圖表系列（三）：直條圖
- SPARKLINE 迷你圖表系列（四）：勝負分析走勢圖
歡迎你打開這邊的試算表，複製一份，一起跟著做吧！
堆疊長條圖屬性與參數設定
先名詞定義一下下，雖然這個迷你圖表的官方名稱叫「堆疊長條圖」，我們也當然可以用 SPARKLINE 函式做出單一長條圖喔。
這邊是堆疊長條圖可以用的屬性：
要注意的是，如果要用 SPARKLINE 函式製作堆疊長條圖，就不能像之前的折線圖可以省略 charttype，必須用 charrtype 屬性指定 "bar" 這個參數：
... {"charttype", "bar"}好！我們打開「堆疊長條圖練習」的工作表，看看第一個練習：
在儲存格 D3 輸入下面的語法，召喚出我們的長條圖看看吧：
=SPARKLINE(B3, {"charttype", "bar"})讚！出現了：
預設顏色是橘色（orange）、長條圖填滿了整個儲存格。
嗯，畫是畫出來了，可是上面這張圖沒什麼意義，對吧？我們想表達 10% （十分之一）的概念，但是這張長條圖沒辦法傳達這個資訊。
我們馬上來看看怎麼設定堆疊長條圖的屬性、調整成合理的樣子吧！
max：長條圖的上限
下面這張圖是不是看起來合理多了？
我這邊做的事情是，告訴 SPARKLINE 這張圖表的最大值是 100%，這麼一來值就可以正常顯示 10% 了：
那麼，你就可以用 max 這個屬性，填入數字來指定圖表的最大值。例如，上圖的 SPARKLINE 寫法是：
=SPARKLINE(B3, {"charttype", "bar"; "max", 100%})
或是
=SPARKLINE(B3, {"charttype", "bar"; "max", 1})這邊的 max 後面要填入的是數字，不是文字，所以不必寫雙引號。當你有百分比、比例的資料，max 這個屬性我想是必須要指定的。
color1、color2：指定第一條長條和第二條長條的顏色
我們還可以進一步用 color1 跟 color2 這兩種屬性，指定長條圖的顏色。
color1 這個屬性可以設定第一條長條的顏色。想要指定顏色的話，你可以輸入英文的顏色名稱、也可以用 HEX 色碼，但這邊不能像是折線圖一樣，直接用文字顏色上色。你可以到左手邊的章節目錄，點選「圖表顏色彙整」，了解怎麼用指定的文字或 HEX 色碼幫你配色喔！
我們來用 color1 打個比方，配個藍色給長條圖：
=SPARKLINE(B9, {"charttype", "bar"; "max", 100%;
"color1", "blue"})這樣就可以用 blue 這個參數來指定第一條長條。當然，你也可以換別的顏色，用剛剛提到的英文顏色名稱、或是 HEX 色碼也 OK。
如果你想做堆疊長條圖，你可以把資料範圍放大一點，指定多個值。例如，我想要做個進度條，表示某個任務已完成 10%：
資料範圍就可以選 B12 到 C12 這兩個值，並且設定最大值（max）是 C12 的 100%：
=SPARKLINE(B12:C12, {"charttype", "bar"; "max", C12})如果要指定第二條長條的顏色，我們可以再用 color2 這個屬性，像是這樣：
=SPARKLINE(B12:C12, {"charttype", "bar"; "max", C12;
"color1", "orange"; "color2", "wheat"})另外，如果你的值超過兩個，color1 跟 color2 會交錯出現：
=SPARKLINE(B17:B22, {"charttype", "bar"; "max", 200})跟上週提到的迷你折線圖屬性一樣，我們也有 empty、nan、rtl 這三個屬性可以利用。先簡要說明一下 empty。
empty：資料若有空白值的處理方式
如果你的資料範圍內有空白值，你可以用 ignore 和 zero 這兩個參數告訴 SPARKLINE 函式怎麼處理這種狀況：
- ignore：把空白值忽略，繼續往下畫，這是預設值。
- zero：把空白值當成 0。
這邊做了一個比較，給你參考看看：
我用下面的範圍（10、20、30、40、""、60）畫了兩張迷你堆疊長條圖，上面的模式是 ignore、下面的模式是 zero。
ignore 模式略過了 40 跟 60 中間的空格，只畫了一藍、一橘，一共兩條長條；而 zero 則是把空值轉換成 0，以 40、0、60 的這個順序畫圖，畫了一藍、一橘、一藍，一共三條長條，只是橘色細到幾乎看不見。
nan：資料若有非數字的處理方式
剛剛的 empty 很像，你可以用 ignore 和 convert 這兩個模式告訴 SPARKLINE 要怎麼處理這類不是數字的資料。
- ignore：把非數字的值忽略，繼續往下畫，這是預設值。
- convert：把非數字的值當成 0。
打個比方，我一樣用一組數值、做了兩張迷你堆疊長條圖，給你參考：
那顆橘子很明顯不是個數字。這跟剛剛處理空白的資料的模式類似，ignore 略過橘子繼續畫下去、而 convert 則是把橘子當成 0、畫了一張很細很細的長條。
rtl：是否由右到左的方向呈現
rtl 是 right-to-left 的簡寫，代表「由右到左」，可以設定 true 或 false 兩個模式，預設是 false。如果設定成 true，第一個資料點會出現在圖表右邊、最後一個資料點則是在左邊，可以說把長條圖水平翻轉過來了。
示範一個 rtl 設定為 false 跟 true 的比對圖給大家看看：
上面的圖是 false，就是預設「由左到右」的模式，所以你會看到第一條長條（10%）在左邊、第二條長條（90%）在右邊；而下圖是 true 模式，也就是「由右至左」，所以我說的「水平翻轉」的意思了。
應用
我想堆疊長條圖很適合用在專案報告、或是甘特圖的進度條圖案，你可以設計這種簡單的資料給 SPARKLINE 繪製長條圖：
- 已完成的任務數
- 需完成的任務數
像是這樣：
我利用「已完成的任務數」跟「需完成的任務數」做了右手邊的進度條，並且讓它會依主任務狀態的變化，改變顏色。語法也很單純，只是 SPARKLINE 搭配 IFS 使用：
=IFS(D4 = "已完成", SPARKLINE(E4:F4, {"charttype", "bar"; "max", F4; "color1", "green"; "color2", "green"}),D4 = "進行中", SPARKLINE(E4:F4, {"charttype", "bar"; "max", F4; "color1", "orange"; "color2", "wheat"}),D4 = "未完成", SPARKLINE(E4:F4, {"charttype", "bar"; "max", F4; "color1", "gray"; "color2", "gray"}))
- 當 D4 儲存格為「已完成」，進度條顯示綠色。
- 當 D4 儲存格為「進行中」，進度條顯示橘色和小麥色。
- 當 D4 儲存格為「未完成」，進度條顯示灰色。
圖表顏色彙整
- 如果你想用英文指定顏色：請到這篇維基百科的文章，複製「實名」欄位裡的英文名稱、在你的 color 屬性後貼上就可以囉！
- 如果你想用 HEX 色碼指定顏色：我也幫你準備好了！請你點開這個連結：
選到喜歡的顏色後，就可以到 HEX 那個欄位複製色碼了。
下篇會再介紹 SPARKLINE 的直條圖給大家，敬請期待！
如果你喜歡這次的文章，歡迎你透過這些方法支持我：
・按下愛心、按下儲存
・留言告訴我你的想法
・加入喜特先生的官方沙龍，即時看到我發布的教學
・付費訂閱喜特先生的官方沙龍，加入每月小額訂閱方案
・追蹤喜特先生的 Facebook
・按這邊小額贊助我的創作！
想要看更多文章，歡迎來到我的 Notion 頁面找找有沒有你需要的資源喔！
我是喜特先生，Mr. Sheet，我們下個教學見！
此篇文章會顯示動態置底廣告
為什麼會看到廣告
14.2K會員
148內容數
簡潔，快速，有效，
讓你的日常生活、工作生產力大提升！
＿＿＿
快按「加入」，馬上追蹤所有喜特先生的更新，有 Google 試算表教學、Google Apps Script 的研究、數據分析課程的開箱，還有 Google 試算表疑難雜症的解題分享唷！💪
留言0
查看全部
你可能也想看
Google News 追蹤
【特殊圖表教學目錄傳送門 : EXCEL特殊圖表大合輯 | 持續更新中】
看膩了一般常見的目標直條圖，今天來教學把這個死板板的圖表變得更加活潑。
有多活潑?看到封面圖片就知道了吧🤣
【🎗️範例展示】
把目標與實際用不同的形狀加以詮釋，並且把資料標籤改成圓形滑珠的形式，顏色
本篇教學會詳細介紹條 (Bar) 的基本特性，以及在 UI 畫面上的應用，如拖曳、調整大小、空格限制等。此外，教學也針對不同的造型特性進行解說，包括橫向或縱向條、拖曳圖示 (thumb) 調整，以及無法滑動時的隱藏或顯示設定。
以個人創作首組動態貼圖的經驗，從了解動態貼圖規格要求、創造角色、學習使用新軟體Clip Studio Paint及遭遇的問題如何解決的經驗分享。
這篇文章，會帶著大家複習以前學過的 格子點DP框架，
並且以最小成本的下降路徑的應用題與概念為核心，
貫穿一些相關聯的題目，透過框架複現來幫助讀者理解這個演算法框架。
最小成本下降路徑的形式
每個格子點的值代表經過的成本。
要求從最上面那排往下方走，落到最下一排的最小成本的下降路徑。
在 Google Sheets 中，SPARKLINE 函數提供了一個方便的方法來創建迷你圖表，讓你可以輕鬆地視覺化數據。這些迷你圖表可以是折線圖、柱狀圖或其他類型，並且可以在單個儲存格中顯示。本教學將向你展示如何使用 SPARKLINE 函數來創建迷你圖表，讓你能夠快速而直觀地理解你的數據。
【特殊圖表教學目錄傳送門 : EXCEL特殊圖表大合輯 | 持續更新中】
EXCEL中橫條圖（又稱橫向條形圖）是一種常用的圖表類型，用於以視覺化的方式表示數據。它主要用來比較不同類別之間的數據量。每個類別都有一條水平的條形，以代表該類別的數據值。這種圖表通常適合比較不同類別之間的差異。
上篇進一步認識基本的圖形架構與三大 Graph 算法，那首先從 shortest path 開始，我們會陸續去理解這些算法，以及可能的應用，如果還沒有看過上一篇的，可以點以下連結～那我們就開始吧！
【圖論Graph】Part1：初探圖形與圖形演算法之應用
【特殊圖表教學目錄傳送門 : EXCEL特殊圖表大合輯 | 持續更新中】
看膩了一般常見的目標直條圖，今天來教學把這個死板板的圖表變得更加活潑。
有多活潑?看到封面圖片就知道了吧🤣
【🎗️範例展示】
把目標與實際用不同的形狀加以詮釋，並且把資料標籤改成圓形滑珠的形式，顏色
本篇教學會詳細介紹條 (Bar) 的基本特性，以及在 UI 畫面上的應用，如拖曳、調整大小、空格限制等。此外，教學也針對不同的造型特性進行解說，包括橫向或縱向條、拖曳圖示 (thumb) 調整，以及無法滑動時的隱藏或顯示設定。
以個人創作首組動態貼圖的經驗，從了解動態貼圖規格要求、創造角色、學習使用新軟體Clip Studio Paint及遭遇的問題如何解決的經驗分享。
這篇文章，會帶著大家複習以前學過的 格子點DP框架，
並且以最小成本的下降路徑的應用題與概念為核心，
貫穿一些相關聯的題目，透過框架複現來幫助讀者理解這個演算法框架。
最小成本下降路徑的形式
每個格子點的值代表經過的成本。
要求從最上面那排往下方走，落到最下一排的最小成本的下降路徑。
在 Google Sheets 中，SPARKLINE 函數提供了一個方便的方法來創建迷你圖表，讓你可以輕鬆地視覺化數據。這些迷你圖表可以是折線圖、柱狀圖或其他類型，並且可以在單個儲存格中顯示。本教學將向你展示如何使用 SPARKLINE 函數來創建迷你圖表，讓你能夠快速而直觀地理解你的數據。
【特殊圖表教學目錄傳送門 : EXCEL特殊圖表大合輯 | 持續更新中】
EXCEL中橫條圖（又稱橫向條形圖）是一種常用的圖表類型，用於以視覺化的方式表示數據。它主要用來比較不同類別之間的數據量。每個類別都有一條水平的條形，以代表該類別的數據值。這種圖表通常適合比較不同類別之間的差異。
上篇進一步認識基本的圖形架構與三大 Graph 算法，那首先從 shortest path 開始，我們會陸續去理解這些算法，以及可能的應用，如果還沒有看過上一篇的，可以點以下連結～那我們就開始吧！
【圖論Graph】Part1：初探圖形與圖形演算法之應用