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

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

Area chart คือกราฟเส้นที่ระบายพื้นที่ใต้เส้น การระบายเปลี่ยนสิ่งที่ตาเน้นจาก "ความชัน" ไปเป็น "ปริมาณ" จึงเหมาะกับค่าที่มีศูนย์ที่มีความหมายและสะสมได้ เช่น ยอดขายหรือจำนวนคน แต่ไม่เหมาะกับอุณหภูมิหรือดัชนี

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

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

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

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

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

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

ข้อบังคับที่ตามมาคือแกนต้องเริ่มที่ศูนย์ เพราะพื้นที่ที่ระบายคือระยะจากเส้นฐาน ถ้าเส้นฐานไม่ใช่ศูนย์ ขนาดของพื้นที่จะไม่มีความหมายใด ๆ

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

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

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

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

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

1. ตรวจว่าค่ามีศูนย์ที่มีความหมาย
2. เรียงตามเวลา
3. ตรวจค่าติดลบซึ่งทำให้พื้นที่กลับด้าน

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

สเกลของแกน — linear เริ่มที่ศูนย์เท่านั้น สเกล log ทำให้พื้นที่ไม่มีความหมาย

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

date,value
…

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

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

1. ดูขอบบนของพื้นที่เพื่ออ่านแนวโน้ม
2. ดูความหนาของก้อนเพื่อรู้สึกถึงปริมาณ
3. ตรวจว่าแกนเริ่มที่ศูนย์

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

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

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

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

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

# ติดตั้ง: pip install "matplotlib==3.10.*" "pandas==2.*"
# ดาวน์โหลด area-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("area-chart-sample.csv")
df["value"] = pd.to_numeric(df["value"], errors="coerce")
ZEROBASELINE = "yes"   # ← ค่าจาก 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.fill_between(d["date"], d["value"], color="#9ec5f4", alpha=0.7)   # สีอ่อนเพื่อไม่กลบเส้น
ax.plot(d["date"], d["value"], color=C1, linewidth=2)
ax.set_ylim(0, None)     # กราฟพื้นที่ต้องเริ่มที่ศูนย์เสมอ
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("area-chart.png", dpi=160)
print("เขียน area-chart.png แล้ว ·", len(df), "แถว")

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

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

ข้อควรระวัง

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

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

• ศูนย์ไม่มีความหมายสำหรับตัวชี้วัดนี้→ใช้แทน: line-chart
• ต้องเทียบหลายอนุกรม→ใช้แทน: multi-line-chart หรือ stacked-area ถ้าสนใจยอดรวม
• ต้องอ่านค่าที่จุดใดจุดหนึ่งให้แม่น→ใช้แทน: line-chart

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