กราฟขั้นบันไดStep Chart

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

Step chart แสดงค่าที่คงที่ในช่วงหนึ่งแล้วเปลี่ยนแบบกระโดด ต่างจากกราฟเส้นที่ลากเฉียงซึ่งอ้างว่าค่าค่อย ๆ เปลี่ยนระหว่างสองจุด การใช้กราฟเส้นกับข้อมูลแบบนี้จึงเป็นการสื่อสิ่งที่ไม่จริง

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

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

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

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

ข้อมูลบางอย่างไม่ได้ไหลต่อเนื่อง แต่คงที่อยู่ระยะหนึ่งแล้วกระโดดเปลี่ยน เช่น ราคาที่ปรับปีละครั้ง หรืออัตราดอกเบี้ยที่ประกาศเป็นรอบ

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

Step chart แก้ด้วยการลากเส้นแนวนอนจนถึงวันที่เปลี่ยนจริง แล้วค่อยกระโดดในแนวตั้ง ภาพที่ได้จึงตรงกับความจริงทุกจุดเวลา

ประโยชน์ที่ตามมาคือ "ความยาวของขั้น" กลายเป็นข้อมูลด้วย ขั้นยาวแปลว่าค่านั้นอยู่นาน ขั้นสั้นแปลว่าเปลี่ยนบ่อย ซึ่งกราฟเส้นบอกไม่ได้

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

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

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

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

1. ตรวจว่าค่าเปลี่ยนเป็นครั้งจริง
2. เก็บเฉพาะจุดที่ค่าเปลี่ยน ไม่ต้องเก็บทุกวัน
3. ระบุว่าค่าใหม่มีผลตั้งแต่เมื่อใด

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

สเกลของแกน — linear เป็นหลัก ใช้ log ได้ถ้าค่ากินหลายเท่า

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

date,value
…

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

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

1. หาระดับของขั้นปัจจุบัน
2. ดูความยาวของขั้นเพื่อรู้ว่าค่านั้นอยู่มานานแค่ไหน
3. ดูขนาดของการกระโดดแต่ละครั้ง

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

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

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

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

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

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

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

df["date"] = pd.to_datetime(df["date"])
d = df.sort_values("date")
ax.step(d["date"], d["value"], where="post", color=C1, linewidth=2)   # post = ค่าใหม่มีผลตั้งแต่วันนั้น
ax.scatter(d["date"], d["value"], color=C1, s=26, zorder=3)
ax.set_ylabel("ค่า"); ax.grid(axis="y", alpha=0.25); ax.set_axisbelow(True)
fig.autofmt_xdate()

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

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

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

ข้อควรระวัง

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

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

• ค่าเปลี่ยนแปลงต่อเนื่องจริง→ใช้แทน: line-chart
• มีจุดเปลี่ยนน้อยมากเพียง 2-3 ครั้ง→ใช้แทน: slope-chart หรือเขียนเป็นข้อความ
• ต้องการเน้นปริมาณสะสม→ใช้แทน: area-chart ที่ใช้ curve แบบขั้น

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