ตารางที่มีภาพในเซลล์Data Table with Visuals

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

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

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

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

1. ขั้นที่ 1★ เลือกคอลัมน์ที่ควรมีภาพในเซลล์ ไม่ใช่ใส่ทุกคอลัมน์
2. ขั้นที่ 2เรียงตามคอลัมน์ที่สำคัญที่สุด
3. ขั้นที่ 3ใช้แถบที่เริ่มจากฐานเดียวกันทุกแถว
4. ขั้นที่ 4จัดตัวเลขให้ตรงหลักและใช้ฟอนต์ที่ความกว้างเท่ากัน

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

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

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

กราฟให้รูปแบบทันทีแต่อ่านค่าที่แน่นอนไม่ได้ ซึ่งทำให้คนที่ต้องเอาตัวเลขไปใช้ต่อต้องไปหาข้อมูลดิบอยู่ดี

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

หลักการสำคัญคือแถบต้องเริ่มจากฐานเดียวกันทุกแถว ไม่อย่างนั้นการเทียบด้วยสายตาก็ใช้ไม่ได้ และควรใส่ภาพเฉพาะคอลัมน์ที่สำคัญ

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

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

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

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

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

ค่าที่หายไป — ค่าที่หายไปต้องแสดงเป็นขีดหรือข้อความ ไม่ใช่ศูนย์หรือช่องว่าง

สเกลของแกน — แถบในคอลัมน์เดียวกันต้องใช้สเกลเดียวกันและเริ่มจากฐานเดียวกัน

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

category,value
กรุงเทพฯ,433
เชียงใหม่,416
…

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

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

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

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

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

1. ★ ใส่แถบเฉพาะคอลัมน์ที่สำคัญที่สุดหนึ่งถึงสองคอลัมน์
2. จัดตัวเลขให้ตรงหลักด้วยฟอนต์ที่ความกว้างเท่ากัน
3. เขียนแถวรวมไว้ล่างสุดเมื่อมีความหมาย

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

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

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

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

df = pd.read_csv("data-table-viz-sample.csv")
df["value"] = pd.to_numeric(df["value"], errors="coerce")
NOTE = "both"   # ← ค่าจาก Playground

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

d = df.nlargest(12, "value").reset_index(drop=True)
maxv = d["value"].max()
ax.axis("off")
ax.text(0.02, 1.0, "หมวด", fontsize=10, color="#6b675e", transform=ax.transAxes)
ax.text(0.42, 1.0, "ค่า", fontsize=10, color="#6b675e", ha="right", transform=ax.transAxes)
for i, r in d.iterrows():
    y = 0.92 - i * 0.078
    ax.text(0.02, y, r["category"], fontsize=10, transform=ax.transAxes)
    ax.text(0.42, y, f"{r['value']:,.0f}", fontsize=10, ha="right",
            family="monospace", transform=ax.transAxes)     # ตรงหลัก
    ax.barh(y, r["value"] / maxv * 0.5, left=0.48, height=0.045,   # ★ ฐานเดียวกันทุกแถว
            color=C1, transform=ax.transAxes)

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

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

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

ข้อควรระวัง

1. ★ ใส่แถบทุกคอลัมน์จนภาพรกและไม่มีอะไรเด่น
2. ใช้ฐานหรือสเกลของแถบไม่เหมือนกันในแต่ละแถว ทำให้เทียบด้วยสายตาไม่ได้
3. ไม่จัดตัวเลขให้ตรงหลัก ทำให้เทียบจำนวนหลักด้วยสายตาไม่ได้
4. ไม่เรียงตามคอลัมน์ที่สำคัญ ทำให้ผู้อ่านต้องไล่หาเอง

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

• ผู้อ่านไม่ต้องการค่าที่แน่นอน→ใช้แทน: horizontal-bar
• มีมากกว่า 60 แถว→ใช้แทน: heatmap-matrix หรือตารางที่มีการค้นหา
• ต้องเห็นรูปแบบที่ซับซ้อน→ใช้แทน: small-multiples หรือ scatter-plot

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