สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
การนำเสนอข้อมูลในรูปแบบของแผนภูมิหรือชาร์ตเป็นวิธีที่มีประสิทธิภาพในการสื่อสารข้อมูลที่ซับซ้อนให้ง่ายต่อการเข้าใจ สำหรับนักพัฒนาเว็บแอปพลิเคชันที่ใช้ JavaScript เป็นภาษาหลัก มีไลบรารีมากมายที่สามารถช่วยให้คุณสร้างชาร์ตที่สวยงามและมีประสิทธิภาพได้อย่างง่ายดาย ในบทความนี้ เราจะพูดถึง 5 JavaScript library ที่โดดเด่นสำหรับการสร้างชาร์ตพร้อมด้วยเคสและตัวอย่างโค้ดเมื่อสามารถทำได้
Chart.js เป็นหนึ่งในไลบรารี JavaScript ที่ใช้กันอย่างแพร่หลายสำหรับการสร้างภาพแผนภูมิ 2D ข้อดีคือมีน้ำหนักเบาและไฟล์ขนาดเล็ก การใช้งาน Chart.js ทำได้ง่ายและสามารถรองรับแทบทุกชนิดของแผนภูมิ ไม่ว่าจะเป็นแผนภูมิแท่ง (Bar), วงกลม (Pie), แถบ (Horizontal Bar), ดอนัท (Doughnut) และอื่นๆ
ตัวอย่างโค้ด:
var ctx = document.getElementById('myChart').getContext('2d');
var 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)',
...
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
...
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
D3.js (หรือ Data-Driven Documents) เป็นไลบรารีอันทรงพลังสำหรับการจัดการข้อมูลและผลิตภัณฑ์ภาพกราฟิกด้วยวิธีการที่ครอบคลุม แม้ว่า D3.js จะต้องใช้เวลาเรียนรู้มากขึ้นเมื่อเทียบกับไลบรารีอื่นๆ แต่ความยืดหยุ่นและความสามารถในการปรับแต่งที่สูงทำให้มันเหมาะสำหรับโปรเจ็คที่ต้องการแผนภูมิที่ไม่ธรรมดาและชัดเจน
ตัวอย่างโค้ด (ที่ย่อมาเพื่อความเข้าใจง่าย):
// สร้าง SVG element และกำหนดค่า width, height
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// โหลดข้อมูลและสร้างชาร์ต
d3.csv("data.csv", function(error, data) {
if (error) throw error;
// เขียนโค้ดในส่วนนี้เพื่อสร้างแผนภูมิ
});
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: javascript chart library chart.js d3.js data_visualization web_development frontend_development
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com