กราฟแท่ง JavaScript ด้วย Chart.js แบบ Bar Charts

กราฟแท่ง JavaScript ด้วย Chart.js แบบ Bar Charts บทความนี้สอนวิธีการติดตั้ง และใช้งาน Chart.js เพื่อสร้างกราฟแท่ง ร่วมกับภาษา JavaScript เพื่อแสดงผลบนหน้าเว็บไซต์ HTML มีรายละเอียดขั้นตอนดังนี้

ตัวอย่าง กราฟแท่ง JavaScript ด้วย Chart.js แบบ Bar Charts

1. สร้างพื้นที่แสดงกราฟแท่ง JavaScript บนหน้าเว็บไซต์ด้วยแท็ก canvas กำหนด id เท่ากับ chart

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

2. ติดตั้ง Chart.js และกำหนดค่าข้อมูลสำหรับแสดงผลกราฟแท่ง ส่วนที่สำคัญคือ labels และ data โดยเก็บทุกอย่างไว้ที่ตัวแปร config

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

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

  const data = {
    labels: labels,
    datasets: [{
      label: 'กราฟแท่ง JavaScript ด้วย Chart.js',
      backgroundColor: 'rgb(71, 237, 171)',
      data: [9, 7, 10, 13, 14, 18],
    }],
    borderWidth: 1
  };

  const config = {
    type: 'bar',
    data: data,
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    },
  };
</script>

3. นำตัวแปร config ไปแสดงผลที่ canvas id = chart เพื่อแสดงกราฟแท่ง JavaScript

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