กราฟ PHP สวยๆ ฟรี ใช้งานง่าย ด้วย Chart.js

กราฟ PHP สวยๆ ฟรี ใช้งานง่าย บทความนี้แนะนำ Chart.js ใช้สำหรับสร้างกราฟ PHP สวยๆ มีหลายแบบให้เลือก เช่น กราฟแท่ง กราฟเส้น กราฟวงกลม สามารถใช้งานได้ฟรี และติดตั้งได้ง่าย มีลำดับขั้นตอนดังนี้

ตัวอย่าง กราฟ PHP สวยๆ ฟรี ใช้งานง่าย ด้วย Chart.js

1. ติดตั้ง Chart.js วางลิงก์ CDN ไว้ภายในแท็ก body ของเว็บไซต์

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

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

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

3. กำหนดข้อมูลที่จะแสดงในกราฟ ประกอบด้วย 2 ส่วนที่สำคัญคือ labels และ data โดย labels คือป้ายข้อมูล หรือหัวข้อของข้อมูล ส่วน data คือจำนวนข้อมูล เช่น A = 20 หมายความว่า A คือ labels มี data เท่ากับ 20

3.1 labels กำหนด A, B, C, D, E, F

3.2 data กำหนด 8, 12, 6, 9, 15

3.3 type: 'line' กำหนดกราฟแสดงผลแบบ กราฟเส้น

<script>
  const labels = [
    'A',
    'B',
    'D',
    'E',
    'F',
  ];

  const data = {
    labels: labels,
    datasets: [{
      label: 'กราฟ PHP ด้วย Chart.js',
      backgroundColor: 'rgb(231, 231, 62)',
      borderColor: 'rgb(37, 213, 154)',
      data: [8, 12, 6, 9, 15],
    }]
  };

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

4. นำค่า config ในขั้นตอนที่ 3 ไปแสดงที่หน้าเว็บไซต์ผ่าน id = chart หากสำเร็จจะแสดงกราฟ PHP สวยๆ ออกสู่หน้าจอ

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