กราฟจิ๋วSparkline

01ภาพรวมของกราฟนี้

Sparkline คือกราฟเส้นที่เล็กพอจะวางในบรรทัดข้อความหรือในตาราง มันตัดแกน ตัวเลข และ grid ออกทั้งหมด เหลือเพียงรูปร่าง เพราะหน้าที่ของมันคือให้บริบท ไม่ใช่ให้อ่านค่า

ใช้ที่ไหนบ้าง — ตารางที่แต่ละแถวมีตัวเลขปัจจุบันและต้องการบอกว่ามาถึงจุดนี้ได้อย่างไร dashboard ที่มี KPI หลายตัว หรือรายงานที่แทรกกราฟในประโยค

สร้างอย่างไร

1. ขั้นที่ 1เลือกอนุกรมที่สั้นพอ
2. ขั้นที่ 2ตัดแกนและ grid ออกทั้งหมด
3. ขั้นที่ 3วางข้างตัวเลขปัจจุบัน
4. ขั้นที่ 4ทำเครื่องหมายเฉพาะจุดล่าสุดหรือจุดสูงสุด

02อธิบายภาษาคนเข้าใจง่าย ๆ

ในตารางที่มี 20 แถว การใส่กราฟเต็มรูปแบบให้ทุกแถวเป็นไปไม่ได้ แต่ตัวเลขเดี่ยว ๆ ก็ไม่บอกว่ามันมาจากไหน sparkline คือทางสายกลางที่ Edward Tufte เสนอไว้

หลักการคือตัดทุกอย่างที่ไม่ใช่รูปร่างออก ไม่มีแกน ไม่มี grid ไม่มีตัวเลขบนกราฟ เพราะในพื้นที่ขนาดนี้องค์ประกอบเหล่านั้นกินที่มากกว่าที่ให้ประโยชน์

สิ่งที่ผู้อ่านได้คือคำตอบของคำถามว่า "ตัวเลขนี้ขึ้นมาตลอดหรือเพิ่งเด้งขึ้นเมื่อเดือนที่แล้ว" ซึ่งเปลี่ยนการตีความตัวเลขปัจจุบันไปคนละเรื่อง

เพราะไม่มีแกน sparkline จึงห้ามใช้เดี่ยว ๆ ต้องมีตัวเลขปัจจุบันกำกับเสมอ และถ้าจะให้ดีควรมีค่าต่ำสุดกับสูงสุดเขียนไว้ด้วย

ข้อควรระวังที่สำคัญคือ ถ้าวาง sparkline หลายเส้นเรียงกันแล้วแต่ละเส้นใช้สเกลของตัวเอง ห้ามให้ผู้อ่านเทียบรูปร่างข้ามแถว เพราะเส้นที่ดูชันเท่ากันอาจมาจากการเปลี่ยนแปลงคนละขนาด

03ข้อมูลที่ต้องใช้

คอลัมน์ที่ต้องเตรียม

ต้องเตรียมข้อมูลอย่างไรก่อนวาด

1. ลดความละเอียดของข้อมูลให้เหลือจำนวนจุดที่พอดี
2. ตัดสินใจว่าแต่ละแถวใช้สเกลของตัวเองหรือสเกลร่วม
3. เตรียมค่าปัจจุบันไว้เขียนกำกับ

ค่าที่หายไป — หักเส้นตรงช่วงที่ไม่มีข้อมูล แม้ในพื้นที่เล็กก็ห้ามลากข้าม

สเกลของแกน — ใช้สเกลของแต่ละแถวเองเมื่อสนใจรูปร่าง หรือสเกลร่วมเมื่อต้องการให้เทียบข้ามแถวได้ และต้องเขียนบอกว่าใช้แบบไหน

หน้าตาไฟล์ที่ต้องเตรียม

date,series,value
…

04อ่านแล้วเห็นอะไร

อ่านตามลำดับนี้

1. อ่านตัวเลขปัจจุบันก่อน
2. ดูรูปร่างของเส้นเพื่อรู้บริบท
3. ดูว่าจุดล่าสุดอยู่สูงหรือต่ำในเส้นของตัวเอง

05เหมาะกับการนำเสนอแบบไหน

ทำอย่างไรให้คนอ่านได้ข้อสรุปโดยไม่ต้องบรรยาย

1. เขียนค่าปัจจุบันเป็นตัวเลขใหญ่ข้างกราฟเสมอ
2. ทำเครื่องหมายจุดล่าสุดด้วยจุดกลม
3. เขียนช่วงค่าต่ำสุด–สูงสุดไว้ท้ายบรรทัดถ้ามีที่

06เอาไปใช้ต่อ

โค้ดทุกชิ้นอ่านไฟล์ sparkline-sample.csv ชุดเดียวกับที่ Playground ใช้ และตัวเลขในโค้ดเปลี่ยนตามค่าที่คุณปรับด้านล่าง

# ติดตั้ง: pip install "matplotlib==3.10.*" "pandas==2.*"
# ดาวน์โหลด sparkline-sample.csv จากหน้านี้ แล้ววางไว้ข้างสคริปต์
import matplotlib
matplotlib.use("Agg")   # รันแบบไม่มีหน้าจอ ถ้ารันในเครื่องตัวเองลบบรรทัดนี้ได้
import matplotlib.pyplot as plt
import pandas as pd

C1, C2, C3 = "#2a78d6", "#eb6834", "#1baf7a"   # palette ของคลัง เปลี่ยนเป็นสีองค์กรได้
INK, SURFACE = "#0b0b0b", "#fcfcfb"

df = pd.read_csv("sparkline-sample.csv")
df["value"] = pd.to_numeric(df["value"], errors="coerce")
NOTE = "context"   # ← ค่าจาก Playground

fig, ax = plt.subplots(figsize=(7.6, 4.2), facecolor=SURFACE)
ax.set_facecolor(SURFACE)

df["date"] = pd.to_datetime(df["date"])
names = list(df["series"].unique())
fig.set_size_inches(7.6, 0.6 * len(names) + 0.4)
fig.clf()
for i, name in enumerate(names):
    g = df[df["series"] == name].sort_values("date")
    a = fig.add_subplot(len(names), 1, i + 1)
    a.plot(g["date"], g["value"], color=C1, linewidth=1.4)
    a.scatter(g["date"].iloc[-1], g["value"].iloc[-1], color=C1, s=14)
    a.axis("off")           # ตัดแกนและ grid ออกทั้งหมด นี่คือหัวใจของ sparkline
    a.set_title(f"{name}  {g['value'].iloc[-1]:,.1f}", loc="left", fontsize=9, pad=1)

ax.spines[["top", "right"]].set_visible(False)   # ลดเส้นที่ไม่ได้ให้ข้อมูล
fig.tight_layout()
fig.savefig("sparkline.png", dpi=160)
print("เขียน sparkline.png แล้ว ·", len(df), "แถว")

ติดตั้ง: pip install "matplotlib==3.10.*" "pandas==2.*" · ทดสอบกับเวอร์ชัน 3.10

07ลองเล่นเพื่อเข้าใจ

ข้อควรระวัง

1. ใช้ sparkline เดี่ยว ๆ โดยไม่มีตัวเลขกำกับ ทำให้อ่านอะไรไม่ได้
2. ให้ผู้อ่านเทียบรูปร่างข้ามแถวทั้งที่แต่ละแถวใช้คนละสเกล
3. ใส่จุดข้อมูลมากเกินไปจนเส้นกลายเป็นแถบทึบ
4. เติมแกนและ grid กลับเข้าไปจนพื้นที่ไม่เหลือให้เส้น

เมื่อไหร่ไม่ควรใช้กราฟนี้

• ต้องอ่านค่าจากกราฟ→ใช้แทน: line-chart เต็มรูปแบบ
• มีอนุกรมเดียวและมีพื้นที่เหลือเฟือ→ใช้แทน: line-chart หรือ stat-tile
• ต้องเทียบหลายอนุกรมอย่างแม่นยำ→ใช้แทน: small-multiples ที่ใช้สเกลร่วม

กราฟที่เกี่ยวข้อง