SPARKLINE 迷你圖表系列(三):直條圖

更新 發佈閱讀 8 分鐘

這是 SPARKLINE 迷你圖表系列的第三篇文章!今天要介紹怎麼用 SPARKLINE 繪製迷你直條圖,像是這樣:

raw-image

或是調整特定的直條顏色:

raw-image


歡迎到這邊參考 SPARKLINE 的各種應用方式:

如果這是你第一次看到 SPARKLINE 這個東西,建議你到第一篇的折線圖先看過,再過來瞭解直條圖怎麼做喔。

另外,如果你在手機上看到這篇文章、覺得有興趣,你可以用方格子的收藏功能、把文章它存起來,練習的時候在電腦打開來看看。

好,開始做做看吧!歡迎你打開這邊的試算表,複製一份,一起跟著做。


直條圖屬性與參數設定

這邊是直條圖可以使用的屬性:

raw-image

我們打開「練習」的工作表,看看左上角的第一張練習:

raw-image

我們把下面那行數值餵給 SPARKLINE、做出一張迷你直條圖看看吧!

要用 SPARKLINE 做出直條圖,我們要先用 charttype 屬性指定 column 參數,像是這樣:

=SPARKLINE(B4:J4, {"charttype", "column"})
raw-image

出現了一張有高有低的直條圖!如果沒做任何屬性的設定,目前會看到:

  • 每個直條都是黑色的
  • 沒有橫軸,但是好像有個隱形的橫軸在圖表下方
  • 負數的值會低於隱形的橫軸

如果要改變直條的顏色,你可以直接更改那個儲存格的文字顏色:

raw-image

好,我們來看看直條圖可以設定的屬性有哪些,也會附上範例給大家參考。


ymin、ymax:直條的下限值、上限值

你可以用 ymin 跟 ymax 兩個參數設定直條上下限多少,像是這樣:

=SPARKLINE(B8:J8,
{"charttype", "column"; "ymax", 100; "ymin", -20})
raw-image

我發現數值裡目前最大值是 90,最小值是 -10,所以決定把直條上限(ymax)調成 100、下限(ymin)調成 -20,這樣整張圖表看起來會再寬一點點。


highcolor、lowcolor:最大值和最小值的直條顏色

SPARKLINE 還可以設定最大值跟最小值的直條顏色。如果想要一眼看到圖表裡面的最大值跟最小值在哪,就可以標記個醒目的顏色在直條上。

如果想設定最大值的長條,就用 highcolor、最小值的長條就用 lowcolor。設定這種顏色可以用 HEX 色碼,或是指定的英文單字。像是這樣:

=SPARKLINE(L4:T4, 
{"charttype", "column";
"highcolor", "mediumseagreen"; "lowcolor", "salmon"})

我在最大值用了「中碧綠色(mediumseagreen)」、最小值用了「鮭魚色(salmon)」:

raw-image

至於顏色怎麼下,你可以看看文章後面的圖表顏色彙整,給你一些參考!


firstcolor、lastcolor:第一條直條顏色、最後一條直條顏色

也跟剛剛的 highcolor、lowcolor 類似,我們也可以用 firstcolor 跟 lastcolor 這兩個屬性分彆指定第一條直條的顏色、還有最後一條的直條顏色。設定方法也很簡單:

=SPARKLINE(L8:T8, 
{"charttype", "column";
"firstcolor", "chocolate"; "lastcolor", "teal"})

來看看效果:

raw-image


axis、axiscolor:是否繪製橫軸、設定橫軸顏色

再看看那個若有似無的那條隱形橫軸吧!我們可以用 axis 這個屬性、要 SPARKLINE 把橫軸畫出來,參數要寫成 true。像是這樣:

=SPARKLINE(V4:AD4, 
{"charttype", "column";
"axis", true})
raw-image

有個灰色的橫軸出現了!如果 axis 的屬性是 true,我們還可以進一步用 axiscolor 屬性設定軸線的顏色,例如紅色(red):

=SPARKLINE(V4:AD4, 
{"charttype", "column";
"axis", true; "axiscolor", "red"})
raw-image



就跟之前提到的折線圖、堆疊長條圖一樣,在直條圖也可以當指定資料裡含有空白資料、非數字資料時的處理方式,或是決定圖表是否要從右到左的方向呈現。設定方法都大同小異,帶你來看看!

empty:資料若有空白值的處理方式

raw-image

你可以在 empty 用 ignore 或是 zero 參數,告訴 SPARKLINE 該怎麼處理空白的資料,預設值是 ignore。這兩個參數的意思分別是:

  • ignore:跳過空白後,繼續繪圖。
  • zero:把空白當作 0。繼續繪圖。

來比較一下這兩個效果。首先是 ignore:

=SPARKLINE(AF4:AN4, {"charttype", "column"; "empty", "ignore"})
raw-image

原本該是九條直條圖的圖表縮成了八條,這邊就可以看到直條圖跳過了那個空白的值、繼續往後繪圖。

而這邊是 zero 的效果:

raw-image

這邊看似是留了一個空白,這是因為 SPARKLINE 畫了一個 0 的長條。


nan:資料若有非數字的處理方式

而 nan 也是和 empty 類似,只是參數改成 ignore 和 convert 兩個參數:

  • ignore:跳過這個值後,繼續繪圖。
  • convert:把這個值轉換成 0。繼續繪圖。

來比較一下差異:

=SPARKLINE(AF12:AN12, {"charttype", "column"; "nan", "ignore"})
raw-image

來看看 convert 的效果:

=SPARKLINE(AF16:AN16, {"charttype", "column"; "nan", "convert"})
raw-image


rtl:是否以從右到左的方向呈現

最後再看 rtl 屬性,你可以用 true 這個參數讓圖表的數值反轉,讓第一個數值從右邊開始、最後一個數值在左邊結束,有點把圖表水平翻轉的感覺。

我們來看看效果:

=SPARKLINE(AF20:AN20, {"charttype", "column"; "rtl", true})
raw-image

對於長條圖的設計建議,你可以看看之前分享過的「我該用哪個圖表?(二)柱狀圖、長條圖」,裡面有我的一些看法,也會試著把文章的概念稍稍帶過來這邊。


圖表顏色彙整

  • 如果你想用英文指定顏色:請到這篇維基百科的文章,複製「實名」欄位裡的英文名稱、在你的 color 屬性後貼上就可以囉!
raw-image
  • 如果你想用 HEX 色碼指定顏色:我也幫你準備好了!請你點開這個連結
raw-image

選到喜歡的顏色後,就可以到 HEX 那個欄位複製色碼了。


如果你喜歡這次的文章,歡迎你透過這些方法支持我:
・按下愛心、按下儲存
・留言告訴我你的想法
・加入喜特先生的官方沙龍,即時看到我發布的教學
・付費訂閱喜特先生的官方沙龍,加入每月小額訂閱方案
・追蹤喜特先生的 Facebook
・按這邊小額贊助我的創作!

想要看更多文章,歡迎來到我的 Notion 頁面找找有沒有你需要的資源喔!

我是喜特先生,Mr. Sheet,我們下個教學見!



留言
avatar-img
留言分享你的想法!
avatar-img
喜特先生官方沙龍
21.2K會員
153內容數
簡潔,快速,有效, 讓你的日常生活、工作生產力大提升! ___ 快按「加入」,馬上追蹤所有喜特先生的更新,有 Google 試算表教學、Google Apps Script 的研究、數據分析課程的開箱,還有 Google 試算表疑難雜症的解題分享唷!💪
2025/04/20
請你試著在 Google 試算表的儲存格上打這個,按下 Enter: =WHATTHEFOXSAY() 會有神奇的事情發生喔 ✨
Thumbnail
2025/04/20
請你試著在 Google 試算表的儲存格上打這個,按下 Enter: =WHATTHEFOXSAY() 會有神奇的事情發生喔 ✨
Thumbnail
2024/06/02
上次介紹了 REPLACE 函式,可以用來取代儲存格內的特定文字。其實我們還有一個相似的函式叫 SUBSTITUTE,也有取代的功能,不過當然有一點不一樣的地方!今天會分享語法的範例,還有跟 REPLACE 的差異在哪。一起來看看!
Thumbnail
2024/06/02
上次介紹了 REPLACE 函式,可以用來取代儲存格內的特定文字。其實我們還有一個相似的函式叫 SUBSTITUTE,也有取代的功能,不過當然有一點不一樣的地方!今天會分享語法的範例,還有跟 REPLACE 的差異在哪。一起來看看!
Thumbnail
2024/05/25
這是文字處理基礎函式的第四篇文章,今天要來介紹 REPLACE 函式! REPLACE 可以取代掉儲存格內的文字,今天會分享一下它語法怎麼寫、也有兩個實際應用的案例。一起來看看! REPLACE 語法 REPLACE 的語法長了一點點,有四個參數要設定: =REPLACE(要取代
Thumbnail
2024/05/25
這是文字處理基礎函式的第四篇文章,今天要來介紹 REPLACE 函式! REPLACE 可以取代掉儲存格內的文字,今天會分享一下它語法怎麼寫、也有兩個實際應用的案例。一起來看看! REPLACE 語法 REPLACE 的語法長了一點點,有四個參數要設定: =REPLACE(要取代
Thumbnail
看更多
你可能也想看
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
直接用例子舉例,下圖的數據用眼睛看很難看出相關比較與趨勢,但是如果畫成圖表呢?密密麻麻好幾條線,要看出趨勢對於眼睛來說是個很大的考驗,那麼改怎麼做才能將這樣的數據可視化呢? 今天將會提供三種方法 可以先下載檔案一邊看教學一邊練習,這樣才不會忘記唷 檔案下載 第一種:設定格式化條件 設定格式化條件裡面
Thumbnail
直接用例子舉例,下圖的數據用眼睛看很難看出相關比較與趨勢,但是如果畫成圖表呢?密密麻麻好幾條線,要看出趨勢對於眼睛來說是個很大的考驗,那麼改怎麼做才能將這樣的數據可視化呢? 今天將會提供三種方法 可以先下載檔案一邊看教學一邊練習,這樣才不會忘記唷 檔案下載 第一種:設定格式化條件 設定格式化條件裡面
Thumbnail
大家好!今天要跟大家分享 SPARKLINE 的最後一種圖表,勝負分析走勢圖。到這邊 SPARKLINE 系列就連載完畢囉,謝謝支持!
Thumbnail
大家好!今天要跟大家分享 SPARKLINE 的最後一種圖表,勝負分析走勢圖。到這邊 SPARKLINE 系列就連載完畢囉,謝謝支持!
Thumbnail
這是 SPARKLINE 迷你圖表系列的第三篇文章!今天要介紹怎麼用 SPARKLINE 繪製迷你直條圖。
Thumbnail
這是 SPARKLINE 迷你圖表系列的第三篇文章!今天要介紹怎麼用 SPARKLINE 繪製迷你直條圖。
Thumbnail
在上週我們介紹了怎麼用 SPARKLINE 函式製作折線圖。今天要繼續介紹怎麼用 SPARKLINE 函式製作「堆疊長條圖」!
Thumbnail
在上週我們介紹了怎麼用 SPARKLINE 函式製作折線圖。今天要繼續介紹怎麼用 SPARKLINE 函式製作「堆疊長條圖」!
Thumbnail
先了解如何選擇正確的圖表類別 讓我們舉個例子來說明吧!!
Thumbnail
先了解如何選擇正確的圖表類別 讓我們舉個例子來說明吧!!
Thumbnail
上一篇我們聊到了折線圖(還沒看過的話,歡迎點連結),有稍稍提到了一點關於「柱狀圖」和「長條圖」的觀念。或許你小學就看過了這兩種圖,但你還記得要怎麼用這兩種圖嗎 ᕕ ( ᐛ ) ᕗ? 為了別讓數學老師哭出來,今天來把它們說清楚!
Thumbnail
上一篇我們聊到了折線圖(還沒看過的話,歡迎點連結),有稍稍提到了一點關於「柱狀圖」和「長條圖」的觀念。或許你小學就看過了這兩種圖,但你還記得要怎麼用這兩種圖嗎 ᕕ ( ᐛ ) ᕗ? 為了別讓數學老師哭出來,今天來把它們說清楚!
Thumbnail
最近和一位剛出社會的新鮮人學弟吃飯,聽他講了一個他做的報告慘遭主管嫌棄的小故事。發生什麼事呢?今天要來聊聊折線圖,我們來瞧瞧!
Thumbnail
最近和一位剛出社會的新鮮人學弟吃飯,聽他講了一個他做的報告慘遭主管嫌棄的小故事。發生什麼事呢?今天要來聊聊折線圖,我們來瞧瞧!
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News