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

更新 發佈閱讀 8 分鐘

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

vocus|新世代的創作平台

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

vocus|新世代的創作平台


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

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

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

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


直條圖屬性與參數設定

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

vocus|新世代的創作平台

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

vocus|新世代的創作平台

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

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

=SPARKLINE(B4:J4, {"charttype", "column"})
vocus|新世代的創作平台

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

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

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

vocus|新世代的創作平台

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


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

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

=SPARKLINE(B8:J8,
{"charttype", "column"; "ymax", 100; "ymin", -20})
vocus|新世代的創作平台

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


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

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

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

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

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

vocus|新世代的創作平台

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


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

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

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

來看看效果:

vocus|新世代的創作平台


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

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

=SPARKLINE(V4:AD4, 
{"charttype", "column";
"axis", true})
vocus|新世代的創作平台

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

=SPARKLINE(V4:AD4, 
{"charttype", "column";
"axis", true; "axiscolor", "red"})
vocus|新世代的創作平台



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

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

vocus|新世代的創作平台

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

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

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

=SPARKLINE(AF4:AN4, {"charttype", "column"; "empty", "ignore"})
vocus|新世代的創作平台

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

而這邊是 zero 的效果:

vocus|新世代的創作平台

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


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

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

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

來比較一下差異:

=SPARKLINE(AF12:AN12, {"charttype", "column"; "nan", "ignore"})
vocus|新世代的創作平台

來看看 convert 的效果:

=SPARKLINE(AF16:AN16, {"charttype", "column"; "nan", "convert"})
vocus|新世代的創作平台


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

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

我們來看看效果:

=SPARKLINE(AF20:AN20, {"charttype", "column"; "rtl", true})
vocus|新世代的創作平台

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


圖表顏色彙整

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

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


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

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

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



留言
avatar-img
喜特先生官方沙龍
21.1K會員
158內容數
簡潔,快速,有效, 讓你的日常生活、工作生產力大提升! ___ 快按「加入」,馬上追蹤所有喜特先生的更新,有 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
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
先了解如何選擇正確的圖表類別 讓我們舉個例子來說明吧!!
Thumbnail
先了解如何選擇正確的圖表類別 讓我們舉個例子來說明吧!!
Thumbnail
在上週我們介紹了怎麼用 SPARKLINE 函式製作折線圖。今天要繼續介紹怎麼用 SPARKLINE 函式製作「堆疊長條圖」!
Thumbnail
在上週我們介紹了怎麼用 SPARKLINE 函式製作折線圖。今天要繼續介紹怎麼用 SPARKLINE 函式製作「堆疊長條圖」!
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
這是 SPARKLINE 迷你圖表系列的第三篇文章!今天要介紹怎麼用 SPARKLINE 繪製迷你直條圖。
Thumbnail
這是 SPARKLINE 迷你圖表系列的第三篇文章!今天要介紹怎麼用 SPARKLINE 繪製迷你直條圖。
Thumbnail
直接用例子舉例,下圖的數據用眼睛看很難看出相關比較與趨勢,但是如果畫成圖表呢?密密麻麻好幾條線,要看出趨勢對於眼睛來說是個很大的考驗,那麼改怎麼做才能將這樣的數據可視化呢? 今天將會提供三種方法 可以先下載檔案一邊看教學一邊練習,這樣才不會忘記唷 檔案下載 第一種:設定格式化條件 設定格式化條件裡面
Thumbnail
直接用例子舉例,下圖的數據用眼睛看很難看出相關比較與趨勢,但是如果畫成圖表呢?密密麻麻好幾條線,要看出趨勢對於眼睛來說是個很大的考驗,那麼改怎麼做才能將這樣的數據可視化呢? 今天將會提供三種方法 可以先下載檔案一邊看教學一邊練習,這樣才不會忘記唷 檔案下載 第一種:設定格式化條件 設定格式化條件裡面
Thumbnail
上一篇我們聊到了折線圖(還沒看過的話,歡迎點連結),有稍稍提到了一點關於「柱狀圖」和「長條圖」的觀念。或許你小學就看過了這兩種圖,但你還記得要怎麼用這兩種圖嗎 ᕕ ( ᐛ ) ᕗ? 為了別讓數學老師哭出來,今天來把它們說清楚!
Thumbnail
上一篇我們聊到了折線圖(還沒看過的話,歡迎點連結),有稍稍提到了一點關於「柱狀圖」和「長條圖」的觀念。或許你小學就看過了這兩種圖,但你還記得要怎麼用這兩種圖嗎 ᕕ ( ᐛ ) ᕗ? 為了別讓數學老師哭出來,今天來把它們說清楚!
Thumbnail
大家好!今天要跟大家分享 SPARKLINE 的最後一種圖表,勝負分析走勢圖。到這邊 SPARKLINE 系列就連載完畢囉,謝謝支持!
Thumbnail
大家好!今天要跟大家分享 SPARKLINE 的最後一種圖表,勝負分析走勢圖。到這邊 SPARKLINE 系列就連載完畢囉,謝謝支持!
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News