กราฟน้ำตกWaterfall Chart

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

Waterfall chart ตอบคำถามว่า "ทำไมยอดถึงเปลี่ยนจาก A เป็น B" โดยแตกส่วนต่างออกเป็นขั้นย่อยที่บวกและลบ แท่งแต่ละขั้นลอยอยู่ที่ระดับสะสม ทำให้มองเห็นเส้นทางของตัวเลขตั้งแต่ต้นจนจบ

ใช้ที่ไหนบ้าง — อธิบายการเปลี่ยนแปลงของกำไร วิเคราะห์ที่มาของการเติบโตของผู้ใช้ หรือแจกแจงส่วนต่างงบประมาณ

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

1. ขั้นที่ 1กำหนดยอดตั้งต้นและยอดปลายทาง
2. ขั้นที่ 2แตกส่วนต่างเป็นขั้นที่อธิบายได้
3. ขั้นที่ 3เรียงขั้นตามลำดับที่มีเหตุผล
4. ขั้นที่ 4ปิดท้ายด้วยแท่งยอดรวม

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

เวลาบอกว่ากำไรปีนี้ลดลง 12% คำถามถัดไปที่ทุกคนถามคือ "เพราะอะไร" กราฟแท่งธรรมดาตอบไม่ได้ เพราะมันแสดงแค่สองยอดโดยไม่บอกว่าอะไรอยู่ระหว่างกลาง

Waterfall แตกส่วนต่างออกเป็นขั้น ๆ เช่น ลูกค้าใหม่ทำให้เพิ่ม ส่วนลดทำให้ลด ลูกค้าเลิกใช้ทำให้ลด ทุกขั้นวางต่อกันเหมือนบันไดจากยอดแรกไปยอดสุดท้าย

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

ข้อบังคับที่สำคัญคือทุกขั้นต้องบวกกันแล้วได้ส่วนต่างจริงพอดี ถ้ามีส่วนที่อธิบายไม่ได้ ต้องใส่แท่ง "อื่น ๆ" ไว้ ห้ามปัดทิ้งเงียบ ๆ เพราะจะทำให้ภาพโกหก

ลำดับของขั้นเป็นการตัดสินใจเชิงบรรณาธิการ เรียงตามขนาดจะเห็นตัวที่สำคัญก่อน เรียงตามกระบวนการจริงจะเล่าเรื่องได้ดีกว่า ไม่ว่าเลือกแบบไหนต้องเขียนบอก

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

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

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

1. ตรวจว่าผลรวมของทุกขั้นเท่ากับส่วนต่างจริง
2. รวมขั้นที่เล็กกว่า 3% เป็น "อื่น ๆ"
3. ตัดสินใจลำดับของขั้นและเขียนเหตุผล

ค่าที่หายไป — ส่วนที่อธิบายไม่ได้ต้องใส่เป็นแท่ง "อื่น ๆ" หรือ "ยังอธิบายไม่ได้" เสมอ การละทิ้งจะทำให้บันไดไปไม่ถึงยอดปลาย

สเกลของแกน — linear และควรให้เห็นเส้นศูนย์ในภาพ

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

step,delta
…

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

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

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

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

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

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

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

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

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

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

df = pd.read_csv("waterfall-chart-sample.csv")
df["delta"] = pd.to_numeric(df["delta"], errors="coerce")
NOTE = "path"   # ← ค่าจาก Playground

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

vals = df["delta"].to_numpy()
starts = np.concatenate([[0], np.cumsum(vals)[:-1]])
starts[0] = 0
colors = ["#256abf"] + ["#008300" if v >= 0 else "#e34948" for v in vals[1:]]
ax.bar(df["step"], vals, bottom=starts, color=colors, width=0.62)
total = vals.sum()
ax.bar(["ยอดปลายงวด"], [total], color="#256abf", width=0.62)   # ต้องมีแท่งยอดรวมปิดท้าย
ax.axhline(0, color=INK, linewidth=1)
plt.setp(ax.get_xticklabels(), rotation=30, ha="right")

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

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

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

ข้อควรระวัง

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

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

• ต้องการดูองค์ประกอบ ณ จุดเวลาเดียว→ใช้แทน: stacked-bar หรือ treemap
• มีหลายช่วงเวลาต่อเนื่อง→ใช้แทน: line-chart หรือ stacked-area
• ขั้นแต่ละขั้นคือการหลุดของคนในกรวย→ใช้แทน: funnel-chart

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