ในยุคที่ “Data is the new oil” ข้อมูลดิบที่อยู่ในตาราง Excel หรือฐานข้อมูลนั้นแทบจะไร้ความหมาย หากเราไม่สามารถนำมันมา “เล่าเรื่อง” (Storytelling) ได้
การสร้าง Dashboard (แดชบอร์ด) คือศิลปะในการย่อยข้อมูลที่ซับซ้อนมหาศาล ให้ออกมาเป็นภาพที่ “เข้าใจง่าย” “มองเห็นแนวโน้ม” และ “ช่วยตัดสินใจ” ได้ในพริบตา และข่าวดีก็คือ คุณไม่จำเป็นต้องซื้อซอฟต์แวร์ราคาแพงเพื่อทำสิ่งนี้
ขอแนะนำ Chart.js ไลบรารี JavaScript ที่จะเปลี่ยนหน้าเว็บธรรมดาๆ ของคุณ ให้กลายเป็น Dashboard แสดงผลข้อมูลแบบอินเทอร์แอคทีฟ สวยงาม และที่สำคัญคือ ฟรี!
บทความนี้คือคู่มือฉบับเริ่มต้น ที่จะพาคุณสร้าง Dashboard แรกด้วยโค้ด HTML และ JavaScript ล้วนๆ
Chart.js คืออะไร? ทำไมต้องเลือก?
Chart.js คือไลบรารี JavaScript แบบ Open-source ที่ช่วยให้นักพัฒนาสามารถวาดกราฟและแผนภูมิที่สวยงามลงบนหน้าเว็บได้อย่างง่ายดาย โดยใช้เทคโนโลยี HTML5 Canvas
เหตุผลที่ Chart.js ครองใจนักพัฒนาสาย Dashboard:
- ง่าย (Simple): มีโครงสร้างการใช้งานที่เข้าใจง่าย แม้มือใหม่ก็เรียนรู้ได้เร็ว
- ฟรี (Open Source): ไม่มีค่าใช้จ่ายแอบแฝง
- ยืดหยุ่น (Flexible): ปรับแต่งสีสัน, รูปแบบ, ตัวอักษร ได้แทบทุกส่วน
- สวยงาม (Animated): กราฟที่ได้มี Animation สวยงามในตัว ดูมีชีวิตชีวา
- ตอบสนอง (Responsive): กราฟจะปรับขนาดตามหน้าจอ (มือถือ/แท็บเล็ต) อัตโนมัติ
ขั้นตอนที่ 1: เตรียมพื้นที่ (HTML Setup)
สิ่งแรกที่เราต้องการคือไฟล์ HTML และการ “เรียกใช้” ไลบรารี Chart.js วิธีที่ง่ายที่สุดคือการเรียกผ่าน CDN (Content Delivery Network) โดยไม่ต้องดาวน์โหลดไฟล์ใดๆ
สร้างไฟล์ index.html แล้ววางโค้ดนี้ลงไป:
HTML
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
/* CSS สำหรับจัด Dashboard ให้สวยงาม */
body { font-family: Arial, sans-serif; background: #f0f2f5; }
h1 { text-align: center; color: #333; }
.dashboard-container {
display: flex;
flex-wrap: wrap; /* ให้ขึ้นบรรทัดใหม่เมื่อจอเล็ก */
justify-content: center;
gap: 20px;
padding: 20px;
}
.chart-box {
width: 100%;
max-width: 500px; /* ขนาดสูงสุดของแต่ละกราฟ */
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
</style>
</head>
<body>
<h1>My Dashboard</h1>
<div class="dashboard-container">
<div class="chart-box">
<canvas id="salesChart"></canvas>
</div>
<div class="chart-box">
<canvas id="productChart"></canvas>
</div>
<div class="chart-box">
<canvas id="branchChart"></canvas>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
ขั้นตอนที่ 2: สร้าง “ผืนผ้าใบ” (The Canvas)
หัวใจของ Chart.js คือแท็ก <canvas> นี่คือ “ผืนผ้าใบ” ที่ JavaScript จะใช้วาดกราฟลงไป สังเกตว่าใน HTML ด้านบน เราได้สร้าง id ที่ไม่ซ้ำกันให้แต่ละ Canvas:
<canvas id="salesChart"></canvas><canvas id="productChart"></canvas><canvas id="branchChart"></canvas>
ขั้นตอนที่ 3: เป่าวิญญาณ (The JavaScript)
ตอนนี้มาถึงส่วนที่สนุกที่สุด สร้างไฟล์ใหม่ชื่อ app.js (ต้องอยู่ในโฟลเดอร์เดียวกับ index.html)
ในไฟล์นี้ เราจะดึง id ของ canvas ที่เราสร้างไว้ และ “สั่ง” Chart.js ให้วาดกราฟลงไป
วางโค้ดนี้ทั้งหมดลงใน app.js:
JavaScript
// ---- 1. กราฟเส้น (Line Chart) - แสดงแนวโน้ม ----
//
[Image of a line chart created with Chart.js]
const ctxSales = document.getElementById('salesChart').getContext('2d');
new Chart(ctxSales, {
type: 'line', // ประเภทกราฟ
data: {
labels: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.'], // แกน X
datasets: [{
label: 'ยอดขาย (บาท)', // ชื่อข้อมูล
data: [12000, 19000, 15000, 25000, 22000, 30000], // ข้อมูลแกน Y
borderColor: 'rgb(75, 192, 192)', // สีเส้น
tension: 0.1 // ความโค้งของเส้น
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'กราฟแสดงยอดขาย 6 เดือนแรก' // หัวข้อกราฟ
}
}
}
});
// ---- 2. กราฟโดนัท (Doughnut Chart) - แสดงสัดส่วน ----
//
[Image of a doughnut chart created with Chart.js]
const ctxProduct = document.getElementById('productChart').getContext('2d');
new Chart(ctxProduct, {
type: 'doughnut',
data: {
labels: ['เสื้อผ้า', 'เครื่องใช้ไฟฟ้า', 'หนังสือ', 'อาหาร'],
datasets: [{
label: 'สัดส่วนสินค้า',
data: [300, 150, 100, 200], // ข้อมูล
backgroundColor: [ // สีของแต่ละส่วน
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)',
'rgb(153, 102, 255)'
],
hoverOffset: 4
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'สัดส่วนสินค้าขายดี'
}
}
}
});
// ---- 3. กราฟแท่ง (Bar Chart) - แสดงการเปรียบเทียบ ----
//
[Image of a bar chart created with Chart.js]
const ctxBranch = document.getElementById('branchChart').getContext('2d');
new Chart(ctxBranch, {
type: 'bar',
data: {
labels: ['สาขา A', 'สาขา B', 'สาขา C', 'สาขา D'],
datasets: [{
label: 'เป้าหมาย (ล้านบาท)',
data: [10, 12, 15, 9],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}, {
label: 'ยอดขายจริง (ล้านบาท)',
data: [11, 9, 17, 8],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'เปรียบเทียบยอดขายแต่ละสาขา'
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
ผลลัพธ์: เปิดโลก Dashboard ของคุณ!
เมื่อคุณเปิดไฟล์ index.html ขึ้นมาด้วย Web Browser (เช่น Google Chrome) สิ่งที่คุณจะเห็นไม่ใช่หน้าเว็บว่างๆ อีกต่อไป แต่เป็น Dashboard ที่สวยงาม ประกอบด้วย:
- กราฟเส้น แสดงแนวโน้มยอดขายที่เพิ่มขึ้น
- กราฟโดนัท แสดงสัดส่วนสินค้าที่ขายดี
- กราฟแท่ง เปรียบเทียบยอดขายจริงกับเป้าหมายของแต่ละสาขา
ก้าวต่อไป: ทำให้มัน “สวย” ยิ่งขึ้น
ตอนนี้คุณมีพื้นฐานที่มั่นคงแล้ว กุญแจสำคัญในการทำให้ Dashboard “สวย” และ “มีประโยชน์” อยู่ในส่วน options ของแต่ละกราฟ คุณสามารถ:
- เปลี่ยนสี: ทั้ง
backgroundColorและborderColor - ปรับแต่ง Tooltips: ข้อความที่แสดงเมื่อเอาเมาส์ไปชี้
- ซ่อน/แสดงแกน: ปรับแต่ง
scales(แกน X, Y) - เปลี่ยนฟอนต์: กำหนดฟอนต์สำหรับ
title(หัวข้อ) และlabels
Chart.js เป็นเครื่องมือที่ “ง่ายแต่ลึก” มันเปิดประตูให้คุณสร้าง Visualizations ที่ทรงพลังได้โดยไม่มีข้อจำกัด ลองนำข้อมูลจริงของคุณมาใส่ แล้วเริ่ม “เล่าเรื่อง” ผ่าน Dashboard ของคุณเองได้เลย!
