กราฟพื้นที่ซ้อนStacked Area Chart

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

Stacked area chart คือ stacked bar ที่แกนนอนเป็นเวลาต่อเนื่อง ขอบบนสุดบอกยอดรวมและแต่ละชั้นบอกส่วนประกอบ ข้อจำกัดเหมือนกันคือมีเพียงชั้นล่างสุดที่วางบนเส้นฐานเรียบ ชั้นบน ๆ ต้องขึ้นลงตามชั้นล่างจนอ่านรูปร่างของตัวเองยาก

ใช้ที่ไหนบ้าง — ยอดขายรวมรายเดือนแยกตามสินค้า จำนวนผู้ใช้รวมแยกตามแพลตฟอร์ม หรือการใช้พลังงานรวมแยกตามแหล่ง

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

1. ขั้นที่ 1ตรวจว่าค่าบวกกันได้จริง
2. ขั้นที่ 2กำหนดลำดับการซ้อนให้คงที่
3. ขั้นที่ 3วางอนุกรมที่นิ่งที่สุดไว้ชั้นล่าง
4. ขั้นที่ 4ใส่ legend เรียงตามลำดับการซ้อน

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

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

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

ทางแก้เชิงปฏิบัติคือวางอนุกรมที่นิ่งที่สุดหรือใหญ่ที่สุดไว้ชั้นล่าง และวางอนุกรมที่เราอยากให้คนอ่านรูปร่างได้ชัดไว้ชั้นล่างสุดเช่นกัน

ข้อบังคับที่เหมือนกับพื้นที่ปกติคือค่าต้องบวกกันได้จริง ถ้าเป็นอัตราส่วนหรือเปอร์เซ็นต์ของคนละฐาน การซ้อนจะไม่มีความหมายทางคณิตศาสตร์เลย

ถ้าคำถามคือสัดส่วนไม่ใช่ยอดรวม ให้เปลี่ยนไปใช้แบบ 100% ซ้อน ซึ่งขอบบนจะแบนเรียบและอ่านสัดส่วนได้ตรง

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

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

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

1. ตรวจว่าทุกอนุกรมมีจุดเวลาครบตรงกัน
2. กำหนดลำดับการซ้อนโดยวางอนุกรมที่นิ่งไว้ล่างสุด
3. รวมอนุกรมเล็กเป็น "อื่น ๆ"

ค่าที่หายไป — ถ้าอนุกรมใดขาดข้อมูลในช่วงหนึ่ง ยอดรวมจะต่ำกว่าความจริงโดยที่ภาพยังดูปกติ ต้องทำเครื่องหมายช่วงนั้นให้ชัด

สเกลของแกน — linear เริ่มที่ศูนย์ เพราะการซ้อนอาศัยสมบัติการบวก

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

date,series,value
…

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

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

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

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

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

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

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

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

# ติดตั้ง: pip install "matplotlib==3.10.*" "pandas==2.*"
# ดาวน์โหลด stacked-area-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("stacked-area-sample.csv")
df["value"] = pd.to_numeric(df["value"], errors="coerce")
NOTE = "middle"   # ← ค่าจาก Playground

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

df["date"] = pd.to_datetime(df["date"])
pivot = df.pivot_table(index="date", columns="series", values="value", aggfunc="sum").fillna(0)
ax.stackplot(pivot.index, *[pivot[c] for c in pivot.columns], labels=list(pivot.columns),
             colors=[C1, C2, C3][: len(pivot.columns)], edgecolor=SURFACE, linewidth=1.2)
ax.set_ylim(0, None)      # การซ้อนอาศัยสมบัติการบวก จึงต้องเริ่มที่ศูนย์
ax.legend(frameon=False, ncols=3, loc="upper left")
fig.autofmt_xdate()

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

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

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

ข้อควรระวัง

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

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

• ต้องอ่านรูปร่างของแต่ละอนุกรมให้ตรง→ใช้แทน: small-multiples หรือ multi-line-chart
• สนใจสัดส่วนมากกว่ายอดรวม→ใช้แทน: percent-stacked-bar หรือ streamgraph
• ค่าบวกกันไม่ได้→ใช้แทน: multi-line-chart

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