กราฟหลายเส้นMulti-line Chart

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

Multi-line chart เทียบแนวโน้มของหลายอนุกรมพร้อมกัน สิ่งที่มีค่าที่สุดคือจุดตัดและช่องว่างระหว่างเส้น ซึ่งบอกเรื่องที่กราฟเส้นเดียวเล่าไม่ได้ ข้อจำกัดคือจำนวนเส้น เพราะเกิน 5-6 เส้นจะกลายเป็นพันกันจนอ่านไม่ได้

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

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

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

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

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

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

ทางแก้ที่ถูกต้องเมื่อหน่วยต่างกันมีสองทาง คือแยกเป็นกราฟย่อยหลายอัน หรือแปลงทุกเส้นเป็นดัชนีที่เริ่มจากฐานเดียวกัน เช่น ให้ทุกเส้นเริ่มที่ 100 แล้วดูการเติบโตเป็นเปอร์เซ็นต์

จำนวนเส้นเป็นข้อจำกัดจริง เกิน 5-6 เส้นแล้วภาพจะกลายเป็นก้อนเส้นพันกัน ทางออกคือเน้นเส้นเดียวที่เป็นประเด็นด้วยสีเข้ม แล้วทำเส้นที่เหลือเป็นสีเทาจาง ๆ เป็นฉากหลัง

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

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

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

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

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

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

สเกลของแกน — linear เมื่อสนใจค่าสัมบูรณ์ ใช้ log หรือดัชนีฐาน 100 เมื่อสนใจอัตราการเติบโตเทียบกัน

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

date,series,value
…

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

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

1. หาเส้นที่เป็นประเด็นก่อนจากสีที่เด่น
2. ดูว่ามีจุดตัดกันตรงไหนบ้าง
3. ดูว่าช่องว่างระหว่างเส้นเปลี่ยนไปอย่างไร

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

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

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

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

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

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

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

df["date"] = pd.to_datetime(df["date"])
for i, (name, g) in enumerate(df.groupby("series")):
    g = g.sort_values("date")
    ax.plot(g["date"], g["value"], color=[C1, C2, C3][i % 3], linewidth=2, label=name)
    ax.annotate(name, (g["date"].iloc[-1], g["value"].iloc[-1]), xytext=(6, 0),
                textcoords="offset points", fontsize=9, color=[C1, C2, C3][i % 3])  # ป้ายที่ปลายเส้น
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("multi-line-chart.png", dpi=160)
print("เขียน multi-line-chart.png แล้ว ·", len(df), "แถว")

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

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

ข้อควรระวัง

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

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

• หน่วยของแต่ละอนุกรมต่างกัน→ใช้แทน: small-multiples หรือแปลงเป็นดัชนีฐาน 100 ก่อน
• มีมากกว่า 6 อนุกรม→ใช้แทน: small-multiples หรือ horizon-chart
• สนใจยอดรวมของทุกอนุกรม→ใช้แทน: stacked-area
• สนใจอันดับมากกว่าค่า→ใช้แทน: bump-chart

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