กราฟกระสุนBullet Chart

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

Bullet chart คือแถบแนวนอนที่ซ้อนข้อมูลสามชั้น พื้นหลังไล่เฉดบอกช่วงมาตรฐาน แถบทึบบอกค่าที่ทำได้จริง และขีดตั้งบอกเป้าหมาย Stephen Few ออกแบบมาแทนเกจวัดโดยเฉพาะ เพราะเกจใช้พื้นที่มากเพื่อแสดงตัวเลขเดียว

ใช้ที่ไหนบ้าง — dashboard ติดตาม KPI รายงานผลเทียบเป้าไตรมาส หรือหน้าสรุปที่ต้องวางตัวชี้วัดหลายตัวเรียงกัน

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

1. ขั้นที่ 1กำหนดช่วงมาตรฐาน เช่น ต่ำ ปานกลาง ดี
2. ขั้นที่ 2วาดพื้นหลังไล่เฉดตามช่วง
3. ขั้นที่ 3วาดแถบทึบของค่าที่ทำได้
4. ขั้นที่ 4ปักขีดตั้งที่ตำแหน่งเป้าหมาย

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

ปัญหาของเกจวัดแบบเข็มคือมันกินพื้นที่เป็นวงกลมใหญ่เพื่อบอกตัวเลขเดียว ถ้ามี KPI 6 ตัวก็ต้องวางเกจ 6 วง ซึ่งกินทั้งหน้าจอโดยที่ข้อมูลจริงมีแค่ 6 ตัวเลข

Bullet chart แก้ด้วยการยุบเกจให้แบนเป็นแถบแนวนอน ทีนี้วาง KPI หลายตัวเรียงกันในแนวตั้งได้ และเพราะทุกตัวใช้แถบหน้าตาเดียวกัน คนอ่านจึงเทียบข้ามตัวชี้วัดได้ทันที

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

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

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

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

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

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

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

ค่าที่หายไป — ตัวชี้วัดที่ไม่มีเป้าหมายให้วาดแถบโดยไม่มีขีด และเขียนว่า "ยังไม่ตั้งเป้า" เพื่อไม่ให้ผู้อ่านคิดว่าลืมใส่

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

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

date,value,target
…

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

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

1. หาขีดตั้งซึ่งคือเป้าหมายก่อน
2. ดูว่าแถบทึบเลยขีดหรือยัง
3. ดูว่าปลายแถบอยู่ในช่วงเฉดไหน
4. เทียบระยะที่ขาดกับความยาวรวม

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

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

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

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

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

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

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

d = df.tail(5).reset_index(drop=True)
for i, r in d.iterrows():
    for q, shade in zip([1.0, 0.85, 0.6], ["#cde2fb", "#9ec5f4", "#6da7ec"]):
        ax.barh(i, r["target"] * q, height=0.62, color=shade, zorder=1)   # ช่วงมาตรฐาน
    ax.barh(i, r["value"], height=0.26, color=C1, zorder=2)               # ค่าที่ทำได้
    ax.plot([r["target"], r["target"]], [i - 0.33, i + 0.33], color=INK, linewidth=2.6, zorder=3)
ax.set_yticks(range(len(d))); ax.set_yticklabels([f"สัปดาห์ {i+1}" for i in range(len(d))])
ax.set_xlim(0, None); ax.set_xlabel("ค่าที่ทำได้ · ขีดดำคือเป้าหมาย")

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

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

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

ข้อควรระวัง

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

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

• มีตัวชี้วัดเดียวและพื้นที่เหลือเฟือ→ใช้แทน: stat-tile ที่มี sparkline ให้เห็นแนวโน้มด้วย
• ไม่มีเป้าหมายที่ชัดเจน→ใช้แทน: horizontal-bar ธรรมดา
• ต้องการเห็นแนวโน้มด้วย→ใช้แทน: sparkline-tile หรือ line-chart ที่มีเส้นเป้า

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