การใช้งาน Create bar chart from data ในภาษา JavaScript แบบง่ายๆ พร้อมตัวอย่าง

การใช้งานในการสร้าง bar chart จากข้อมูลด้วยภาษา JavaScript

การแสดงข้อมูลให้ดูสะดุดตาและเข้าใจง่ายเป็นหนึ่งในเป้าหมายสำคัญของการนำเสนอสถิติและข้อมูลต่างๆ ในแวดวงวิทยาการคอมพิวเตอร์และธุรกิจ หนึ่งในเครื่องมือที่ทรงพลังที่สุดในการนำเสนอข้อมูลนี้คือ bar chart หรือแผนภูมิแท่ง เพราะสามารถแสดงข้อมูลได้อย่างชัดเจนและเปรียบเทียบได้ง่ายดาย

ในโลกของการเขียนโปรแกรม การสร้าง bar chart สามารถทำได้ด้วย JavaScript ซึ่งเป็นภาษาระดับสูงที่ใช้งานได้กับทุกเว็บเบราว์เซอร์และนำมาใช้ในโปรเจ็คที่หลากหลาย เราจะไปดูกันว่าเราสามารถสร้าง bar chart ด้วย JavaScript อย่างไรและตัวอย่างโค้ดอะไรบ้างที่สามารถใช้ในการทำงาน

ตัวอย่างโค้ดที่ 1: การใช้ `

HTML5 นำเสนอ `

 <canvas id="myChart" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myChart');
const ctx = canvas.getContext('2d');

const data = [25, 30, 45, 60, 20]; // เปอร์เซ็นต์ของข้อมูลที่จะแสดง
const labels = ["รายการที่ 1", "รายการที่ 2", "รายการที่ 3", "รายการที่ 4", "รายการที่ 5"];
const colors = ["#FF6384", "#36A2EB", "#FFCE56", "#E7E9ED", "#4BC0C0"];

// วาด bar chart
data.forEach((value, index) => {
  ctx.fillStyle = colors[index];
  ctx.fillRect(index * 80, 200, 50, -value * 2);
});
</script>

ตัวอย่างข้างต้นแสดงการใช้ `

ตัวอย่างโค้ดที่ 2: การใช้ Chart.js

Chart.js เป็นไลบรารี JavaScript ฟรีที่ช่วยให้การวาดแผนภูมิต่างๆ อย่าง bar chart ง่ายขึ้น นี่คือตัวอย่างโค้ดที่ใช้อาร์เรย์ข้อมูลและเปลี่ยนเป็น bar chart:

 <canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>

Chart.js ช่วยจัดการรายละเอียดต่างๆ เช่นการทำร่องรอยและเพิ่มตัวเลือกการปรับแต่งผ่าน options object ทั้งนี้จะช่วยให้สามารถนำข้อมูลไปใช้ได้ง่ายขึ้น

ตัวอย่างโค้ดที่ 3: การใช้ D3.js สำหรับการสร้าง bar chart ที่เข้มข้นยิ่งขึ้น

D3.js เป็นสมาชิกที่ทรงอิทธิพลในแวดวง JavaScript library ที่ใช้สำหรับการควบคุมเอกสารตามข้อมูล ทำให้สามารถผสานวิชาความรู้ด้านข้อมูลกับการสร้างภาพไปในคราวเดียว:

 <!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script>
const data = [30, 400, 150, 80, 350, 120];
const width = 500;
const height = 500;
const svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
const barPadding = 5;
const barWidth = (width / data.length);

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("y", d => height - d)
  .attr("height", d => d)
  .attr("width", barWidth - barPadding)
  .attr("transform", (d, i) => {
      const translate = [barWidth * i, 0];
      return "translate("+ translate +")";
  });
</script>

ด้วย D3.js, การสร้าง bar chart จะทำให้เราสามารถใช้ข้อมูลแบบไดนามิกและรวม interaction กับผู้ชมได้

Usecase ในโลกจริง

ในธุรกิจ, bar chart คือเครื่องมือที่มีประสิทธิภาพสูงในการแสดงผลลัพธ์การสำรวจหรือข้อมูลการขายเป็นต้น เช่น การใช้ bar chart แสดงข้อมูลการขายต่อไตรมาส หรือในการศึกษา, สามารถใช้ bar chart แสดงคะแนนสอบของนักเรียนต่อแต่ละวิชา

การเรียนรู้ทักษะการสร้าง bar chart ด้วย JavaScript จึงเป็นเรื่องที่มีคุณค่าในยุคปัจจุบันนี้ ที่ Expert-Programming-Tutor (EPT) เรามีหลักสูตรและเนื้อหาที่จะช่วยให้คุณเข้าใจและประยุกต์ใช้ JavaScript เพื่อสร้าง bar chart ได้ด้วยตัวเอง พร้อมนำไปใช้ในงานของคุณได้ทันที

ต้องการเรียนรู้การเขียนโค้ดสร้าง bar chart และโปรแกรมกราฟิกที่สามารถสื่อสารกับข้อมูลได้อย่างชาญฉลาด? มาร่วมเรียนรู้ด้วยกันที่ Expert-Programming-Tutor และเปิดโลกการเขียนโปรแกรมกับเรา!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง

Tag ที่น่าสนใจ: javascript bar_chart html canvas chart.js d3.js data_visualization programming web_development frontend tutorial coding graph interactive_chart

บทความนี้อาจจะมีที่ผิด กรุณาตรวจสอบก่อนใช้

หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor

ไม่อยากอ่าน Tutorial อยากมาเรียนเลยทำอย่างไร?

สมัครเรียน ONLINE ได้ทันทีที่ https://elearn.expert-programming-tutor.com

หรือติดต่อ

085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM

แผนที่ ที่ตั้งของอาคารของเรา

EXPERT-PROGRAMMING-TUTOR
รับสอนเขียนโปรแกรมคอมพิวเตอร์

JavaScript

การใช้งาน Create bar chart from data ในภาษา JavaScript แบบง่ายๆ พร้อมตัวอย่าง

ตัวอย่างโค้ดที่ 1: การใช้ `

ตัวอย่างโค้ดที่ 2: การใช้ Chart.js

ตัวอย่างโค้ดที่ 3: การใช้ D3.js สำหรับการสร้าง bar chart ที่เข้มข้นยิ่งขึ้น

Usecase ในโลกจริง

บทความนี้อาจจะมีที่ผิด กรุณาตรวจสอบก่อนใช้

ไม่อยากอ่าน Tutorial อยากมาเรียนเลยทำอย่างไร?

สมัครเรียน ONLINE ได้ทันทีที่ https://elearn.expert-programming-tutor.com

หรือติดต่อ

แผนผังการเรียนเขียนโปรแกรม

Link อื่นๆ

ติดต่อเราได้ที่

EXPERT-PROGRAMMING-TUTOR รับสอนเขียนโปรแกรมคอมพิวเตอร์

JavaScript

การใช้งาน Create bar chart from data ในภาษา JavaScript แบบง่ายๆ พร้อมตัวอย่าง

ตัวอย่างโค้ดที่ 1: การใช้ `` ใน HTML กับ JavaScript

ตัวอย่างโค้ดที่ 2: การใช้ Chart.js

ตัวอย่างโค้ดที่ 3: การใช้ D3.js สำหรับการสร้าง bar chart ที่เข้มข้นยิ่งขึ้น

Usecase ในโลกจริง

บทความนี้อาจจะมีที่ผิด กรุณาตรวจสอบก่อนใช้

ไม่อยากอ่าน Tutorial อยากมาเรียนเลยทำอย่างไร?

สมัครเรียน ONLINE ได้ทันทีที่ https://elearn.expert-programming-tutor.com

หรือติดต่อ

แผนผังการเรียนเขียนโปรแกรม

Link อื่นๆ

ติดต่อเราได้ที่

EXPERT-PROGRAMMING-TUTOR
รับสอนเขียนโปรแกรมคอมพิวเตอร์

ตัวอย่างโค้ดที่ 1: การใช้ `