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

# การสร้าง Pie Chart จากข้อมูลด้วย JavaScript ทำอย่างไร?

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

ตัวอย่างที่ 1: การสร้าง Pie Chart ด้วย Chart.js

Chart.js เป็นหนึ่งในไลบรารี JavaScript ที่ได้รับความนิยมมากที่สุดในการสร้างกราฟ มีคำสั่งที่ง่ายต่อการใช้งาน และให้ผลลัพธ์ที่สวยงาม

ตัวอย่างโค้ด:

 // รวม Chart.js ใน HTML
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

// เตรียม canvas ใน HTML สำหรับ Pie Chart
<canvas id="myPieChart" width="400" height="400"></canvas>

// สร้าง Pie Chart ใน JavaScript
var ctx = document.getElementById('myPieChart').getContext('2d');
var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Apple', 'Banana', 'Cherry'],
        datasets: [{
            data: [300, 50, 100],
            backgroundColor: ['red', 'yellow', 'pink']
        }]
    }
});

การทำงาน:

เริ่มจากการรวม Chart.js เข้ากับไฟล์ HTML ของเรา จากนั้นเตรียม canvas ที่เราจะวาด Pie Chart ขึ้นมา ใน Javascript, เรากำหนด context ของ canvas และสร้างออบเจกต์ `Chart` โดยป้อนข้อมูลเช่นประเภทของกราฟ ('pie') และข้อมูลสำหรับเส้นกราฟณ์, สีของพาย

ตัวอย่างที่ 2: การใช้งาน Google Charts

Google Charts ช่วยให้เราสามารถแสดงข้อมูลในรูปแบบต่างๆ ในเว็บไซต์ได้

ตัวอย่างโค้ด:

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="myPieChart" style="width: 900px; height: 500px;"></div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Fruit', 'Quantity'],
    ['Apple',     3],
    ['Banana',    1],
    ['Cherry',    1],
  ]);

  var options = {
    title: 'My Daily Activities',
    pieHole: 0.4,
  };

  var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
  chart.draw(data, options);
}
</script>

การทำงาน:

เราเริ่มที่การโหลด Google Charts loader และเตรียม `

` สำหรับแสดง Pie Chart ภายในฟังก์ชัน `drawChart`, เรากำหนดข้อมูลและตัวเลือกสำหรับ Pie Chart เช่น ชื่อเรื่อง (title) และรูปแบบของ Chart (`pieHole`)

ตัวอย่างที่ 3: D3.js สำหรับการสร้าง Pie Chart ในรูปแบบที่กำหนดเองได้

D3.js เป็นไลบรารีที่ให้ความเสรีในการสร้างประสบการณ์ตัวเลือกอย่างมากเนื่องจากรูปแบบและการควบคุมด้านเทคนิค

ตัวอย่างโค้ด:

 // รวม D3.js ใน HTML
<script src="https://d3js.org/d3.v5.min.js"></script>

// เตรียม SVG ใน HTML สำหรับ Pie Chart
<svg width="400" height="400" id="myPieChart"></svg>

// สร้าง Pie Chart ใน JavaScript โดยใช้ D3.js
var svg = d3.select("#myPieChart"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = Math.min(width, height) / 2,
    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var color = d3.scaleOrdinal(['#4daf4a','#377eb8','#ff7f00']);

var pie = d3.pie().sort(null).value(function(d) { return d.quantity; });

var path = d3.arc().outerRadius(radius - 10).innerRadius(0);

var label = d3.arc().outerRadius(radius - 40).innerRadius(radius - 40);

var data = [{fruit: 'Apple', quantity: 10}, {fruit: 'Banana', quantity: 20}, {fruit: 'Cherry', quantity: 30}];

var arc = g.selectAll(".arc").data(pie(data)).enter().append("g").attr("class", "arc");

arc.append("path")
    .attr("d", path)
    .attr("fill", function(d) { return color(d.data.fruit); });

arc.append("text")
    .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
    .text(function(d) { return d.data.fruit; });

การทำงาน:

ในตัวอย่างนี้ เราเริ่มด้วยการรวมไลบรารี D3.js เข้าไปใน HTML เราเตรียม SVG และสร้างวัตถุ D3.js เพื่อกำหนดขนาดและสร้าง pie layout จากนั้นเราสร้าง elements ภายใน SVG และใช้ D3.js เพื่อวาด paths และ labels สำหรับ Pie Chart

การใช้งาน Pie Chart ในโลกจริง

Pie Charts มีประโยชน์มากในการวิเคราะห์ข้อมูลในหลากหลายสถานการณ์ ตั้งแต่การวิเคราะห์ผลลัพธ์การขาย, การจัดสรรงบประมาณ, ไปจนถึงการวิเคราะห์ปริมาณการใช้งานของผู้ใช้ในแอปพลิเคชั่น กับการใช้งานไลบรารีเหล่านี้ ทำให้เราสามารถสร้างกราฟที่สวยงามและมีปฏิสัมพันธ์กับผู้ใช้งานได้

เพื่อให้คุณได้รับทักษะเหล่านี้ และสามารถนำไปประยุกต์ใช้ในโลกจริง EPT - Expert-Programming-Tutor ยินดีที่จะนำเสนอหลักสูตรที่จะช่วยเพิ่มความสามารถของคุณในการใช้ JavaScript และไลบรารีต่างๆ สำหรับการสร้างเว็บแอปพลิเคชั่นที่สร้างสรรค์และมีประสิทธิภาพ ทั้งนี้ ทักษะเหล่านี้ไม่เพียงแค่เป็นแง่ดีทางเทคนิคเท่านั้น แต่ยังช่วยในการพัฒนาวิธีคิดที่มีแบบแผนและเป็นระบบในการแก้ไขปัญหาในโลกยุคใหม่อีกด้วย

หากคุณพร้อมที่จะอัปเกรดทักษะการเขียนโค้ดของคุณ อย่าลืมตรวจสอบหลักสูตรของเราที่ EPT ที่จะช่วยให้คุณก้าวไปสู่การเป็นผู้เชี่ยวชาญด้านการเขียนโปรแกรมที่มีคุณภาพและจะนำพาคุณไปกว่าที่เคย!

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

Tag ที่น่าสนใจ: pie_chart javascript chart.js google_charts d3.js data_visualization web_development frontend_development

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

หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ 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 pie chart from data ในภาษา JavaScript แบบง่ายๆ พร้อมตัวอย่าง

ตัวอย่างที่ 1: การสร้าง Pie Chart ด้วย Chart.js

ตัวอย่างที่ 2: การใช้งาน Google Charts

ตัวอย่างที่ 3: D3.js สำหรับการสร้าง Pie Chart ในรูปแบบที่กำหนดเองได้

การใช้งาน Pie Chart ในโลกจริง

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

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

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

หรือติดต่อ

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

Link อื่นๆ

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

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

JavaScript

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

ตัวอย่างที่ 1: การสร้าง Pie Chart ด้วย Chart.js

ตัวอย่างที่ 2: การใช้งาน Google Charts

ตัวอย่างที่ 3: D3.js สำหรับการสร้าง Pie Chart ในรูปแบบที่กำหนดเองได้

การใช้งาน Pie Chart ในโลกจริง

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

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

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

หรือติดต่อ

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

Link อื่นๆ

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

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