กราฟเส้น PHP ด้วย Chart.js แบบ Line Charts

กราฟเส้น PHP ด้วย Chart.js แบบ Line Charts บทความนี้สอนวิธีติดตั้ง และใช้งาน Chart.js เพื่อสร้างกราฟเส้น หรือ Line Charts พร้อมแสดงข้อมูลตัวอย่างที่กราฟเส้นออกสู่หน้าจอ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง กราฟเส้น PHP ด้วย Chart.js แบบ Line Charts

1. สร้าง canvas พร้อมกำหนด id เพื่อใช้สำหรับแสดงกราฟเส้นบนหน้าเว็บไซต์ PHP

<canvas id="chart"></canvas>

2. ติดตั้ง Chart.js ผ่านลิงก์ CDN ของ jsdelivr

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

3. กำหนดข้อมูล (config) ที่จะแสดง labels คือหัวข้อแนวนอน และ datasets คือข้อมูลแนวตั้ง และตัวกราฟเส้น ข้อมูลคือ 5, 10, 8, 15, 9, 20

<script>
  const labels = [
    'มกราคม',
    'กุมภาพันธ์',
    'มีนาคม',
    'เมษายน',
    'พฤษภาคม',
    'มิถุนายน',
  ];

  const data = {
    labels: labels,
    datasets: [{
      label: 'กราฟเส้น PHP และ Chart.js',
      backgroundColor: 'rgb(14, 112, 142)',
      borderColor: 'rgb(81, 193, 228)',
      data: [5, 10, 8, 15, 9, 20],
    }]
  };

  const config = {
    type: 'line',
    data: data,
    options: {}
  };
</script>

4. นำค่า config ไปใช้งาน เพื่อแสดงกราฟเส้นที่ canvas id="chart"

<script>
  const myChart = new Chart(
    document.getElementById('chart'),
    config
  );
</script>