วิธีสร้างแผนภูมิอย่างง่ายด้วย Chart.js
การแสดงข้อมูลในลักษณะที่ผู้คนสามารถเข้าใจได้นั้นมีความสำคัญมากในยุคของการตัดสินใจที่ขับเคลื่อนด้วยข้อมูล แผนภูมิและกราฟช่วยให้เราเข้าใจข้อมูล แนวโน้ม และรูปแบบที่ซับซ้อนได้อย่างง่ายดาย
ให้เราเจาะลึกกระบวนการสร้างการแสดงกราฟิกขั้นพื้นฐานโดยใช้ Chart.js ซึ่งเป็นไลบรารี JavaScript ที่ได้รับความนิยมซึ่งใช้กันอย่างแพร่หลายในการแสดงข้อมูลด้วยภาพ
Chart.js คืออะไร?
Chart.js เป็นเครื่องมือฟรีที่ช่วยให้นักพัฒนาสร้างแผนภูมิเชิงโต้ตอบสำหรับเว็บแอป องค์ประกอบแคนวาส HTML5 เรนเดอร์แผนภูมิ ทำให้สามารถทำงานกับเบราว์เซอร์สมัยใหม่ได้
คุณสมบัติของ Chart.js
คุณสมบัติประกอบด้วย:
Chart.js มีชื่อเสียงในด้านการออกแบบที่ใช้งานง่ายซึ่งช่วยให้นักพัฒนาสามารถสร้างแผนภูมิที่มีการโต้ตอบสูงและสวยงามน่าพึงพอใจโดยใช้ความพยายามในการเขียนโค้ดเพียงเล็กน้อย
ห้องสมุดมีความสามารถในการปรับตัวในระดับสูงโดยรองรับแผนภูมิประเภทต่างๆ เช่น กราฟเส้น แผนภูมิแท่ง แผนภูมิวงกลม และแผนภูมิเรดาร์ ดังนั้นจึงตอบสนองข้อกำหนดด้านการแสดงข้อมูลที่หลากหลาย
Chart.js เป็นไลบรารีการสร้างกราฟที่มีความอเนกประสงค์สูง ซึ่งได้รับการออกแบบมาโดยเฉพาะเพื่อให้มีประสิทธิภาพสูงสุดในอุปกรณ์หลากหลายประเภท รวมถึงทั้งแพลตฟอร์มเดสก์ท็อปและมือถือ แผนภูมิเหล่านี้มีระดับการตอบสนองและความสามารถในการปรับตัวที่น่าประทับใจ ทำให้มั่นใจได้ว่าจะสามารถตอบสนองความต้องการของผู้ใช้ได้อย่างมีประสิทธิภาพ โดยไม่คำนึงถึงอุปกรณ์หรือขนาดหน้าจอที่ต้องการ
เราสามารถแก้ไขรูปลักษณ์และฟังก์ชันการทำงานของแผนภูมิที่สร้างด้วย Chart.js ได้โดยใช้อาร์เรย์ของพารามิเตอร์ที่ปรับแต่งได้ แทนที่จะยึดตามการตั้งค่าการกำหนดค่ามาตรฐาน ช่วยให้นักพัฒนาสามารถปรับแต่งการแสดงภาพให้ตรงกับความต้องการเฉพาะของโครงการของตนได้
การตั้งค่าสภาพแวดล้อม
มีสองวิธีที่คุณสามารถสร้างห้องสมุดได้ ซึ่งวิธีใดวิธีหนึ่งก็เหมาะสมกับความต้องการของคุณ
⭐ การใช้ CDN. เพียงรวมแท็กสคริปต์ต่อไปนี้ไว้ในส่วนหัวของเอกสาร HTML ของคุณ
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
⭐ การใช้ตัวจัดการแพ็คเกจ หากคุณต้องการตัวจัดการแพ็คเกจ คุณสามารถติดตั้ง Chart.js โดยใช้ npm ซึ่งเป็น Node Package Manager:
npm install chart.js
หรือเส้นด้าย:
yarn add chart.js
โครงสร้าง HTML พื้นฐาน
เพื่อรวมการแสดงกราฟิกไว้ในเนื้อหา HTML ของคุณ จำเป็นต้องรวมองค์ประกอบ canvas เข้ากับมาร์กอัปที่เหมาะสม การกำหนดค่าพื้นฐานสำหรับจุดประสงค์นี้ประกอบด้วยส่วนประกอบต่อไปนี้:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Welcome to My Data Representation</h1>
<canvas id="myChart" width="400" height="150"></canvas>
<script></script>
</body>
</html>
หากต้องการแต่งเติมหน้าเว็บด้วยความประณีต ให้สร้างเอกสารชื่อ “style.css” ด้วยการรวมกฎ CSS ที่ตามมาไว้ในไฟล์นี้ เราสามารถสร้างลักษณะที่ปรากฏที่ต้องการได้
@import url("https://fonts.googleapis.com/css2?family=Tilt\+Neon&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: "Tilt Neon", sans-serif;
padding: 2rem 4rem;
}
h1 {
font-size: 3rem;
color: #333;
text-align: center;
padding: 3rem;
}
การสร้างแผนภูมิแรกของคุณ: ตัวอย่างแผนภูมิแท่ง
เพื่ออธิบายแนวคิดนี้ ขอให้เราใช้กราฟแท่งซึ่งเหมาะอย่างยิ่งกับการเปรียบเทียบข้อมูลแยกส่วนในหมวดหมู่ต่างๆ
⭐ ในแท็กสคริปต์ที่ด้านล่างของ HTML ให้เริ่มต้นด้วยการเลือกองค์ประกอบ canvas โดยใช้คุณสมบัติ id:
let canvas = document.getElementById('myChart');
⭐ จากนั้น รับบริบทของวิธีแสดงแผนภูมิของคุณ ในกรณีนี้ จะเป็นบริบทการวาดภาพ 2 มิติ
let ctx = canvas.getContext('2d');
⭐ ถัดไป เริ่มต้นแผนภูมิใหม่บนผืนผ้าใบโดยใช้ฟังก์ชัน Chart() ฟังก์ชันนี้รับบริบทแคนวาสเป็นอาร์กิวเมนต์แรก จากนั้นจึงใช้ออบเจ็กต์ของตัวเลือกซึ่งรวมถึงข้อมูลที่จะแสดงในแผนภูมิ
let options = {};
let myChart = new Chart(canvas, options);
⭐ จากนั้น เติมออบเจ็กต์ตัวเลือกเพื่อระบุประเภทแผนภูมิ ข้อมูล และป้ายกำกับที่คุณต้องการในแผนภูมิ
let options = {
type: "bar",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: "Total number of votes on favourite color",
data: [12, 19, 3, 5, 2, 3],
}],
},
};
ปัจจุบันกราฟของคุณปรากฏดังนี้:
จัดแต่งทรงผมและปรับแต่งแผนภูมิ
Chart.js มีความเป็นไปได้มากมายในการปรับแต่งกราฟในแบบของคุณ ซึ่งรวมถึงแต่ไม่จำกัดเพียง:
ปรับปรุงประสบการณ์การมองเห็นของคุณด้วยการปรับแต่งสีแผนภูมิโดยใช้ Chart.js คุณสามารถปรับแต่งได้ไม่เพียงแต่พื้นหลังของแถบเท่านั้น แต่ยังรวมถึงเส้นขอบเพื่อสร้างการแสดงข้อมูลที่เป็นเอกลักษณ์และดึงดูดสายตาอีกด้วย
คำอธิบายสามารถวางในตำแหน่งต่างๆ เพื่อเพิ่มความสามารถในการอ่านและทำความเข้าใจข้อมูลของแผนภูมิ ด้วยการวางไว้ที่ด้านบน ล่าง ซ้าย หรือขวา ผู้ใช้สามารถระบุรูปแบบและแนวโน้มภายในการแสดงภาพได้อย่างง่ายดาย
ใช้คำแนะนำเครื่องมือเพื่อให้ข้อมูลที่ครอบคลุมเกี่ยวกับจุดข้อมูลเมื่อวางเมาส์เหนือ ช่วยให้เข้าใจเนื้อหาที่แสดงได้ลึกซึ้งยิ่งขึ้น
การปรับคุณลักษณะแอนิเมชันของแผนภูมิทำให้ผู้ใช้สามารถกำหนดการแสดงภาพได้ ปรับปรุงไดนามิกโดยรวมและการโต้ตอบของการนำเสนอข้อมูลผ่านการเปลี่ยนผ่านและการตั้งค่าระยะเวลาที่ปรับแต่งเอง
ลองแก้ไขการกำหนดค่าชุดข้อมูลของคุณโดยการปรับออบเจ็กต์ตัวเลือกในลักษณะที่เป็นตัวอย่างที่เรียบง่าย ตัวอย่างเช่น วิธีหนึ่งที่เป็นไปได้คือการเปลี่ยนแปลงออบเจ็กต์ตัวเลือกดังที่แสดงด้านล่าง:
let options = {
type: "bar",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: "Total number of votes on favourite color",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: "rgba(75, 192, 192, 0.2)",
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1,
}],
},
};
แผนภูมิของคุณควรมีลักษณะดังนี้:
แนวทางปฏิบัติที่ดีที่สุดและเคล็ดลับด้านประสิทธิภาพ
เพื่อให้มั่นใจถึงประสิทธิภาพสูงสุดเมื่อเรนเดอร์แผนภูมิ:
เพื่อเพิ่มประสิทธิภาพการทำงานของ Chart.js ขอแนะนำให้จำกัดจำนวนจุดข้อมูลที่ใช้เพื่อเร่งการเรนเดอร์และปรับปรุงประสบการณ์ผู้ใช้โดยรวม
หากจำเป็นต้องอัปเดตกราฟหรือแผนภูมิเป็นประจำ ขอแนะนำให้ใช้ฟังก์ชัน"destroy()“เพื่อกำจัดการนำเสนอที่แสดงไว้ก่อนหน้านี้ก่อนที่จะสร้างการแสดงภาพข้อมูลใหม่ วิธีการนี้ช่วยให้มั่นใจได้ว่าเฉพาะข้อมูลล่าสุดและถูกต้องเท่านั้นที่จะแสดงในแผนภูมิ
เคล็ดลับเพื่อหลีกเลี่ยงข้อผิดพลาดทั่วไป
ต่อไปนี้เป็นข้อผิดพลาดที่ควรหลีกเลี่ยง:
ตรวจสอบให้แน่ใจว่าข้อมูลของคุณเป็นไปตามโครงสร้างที่สม่ำเสมอ เพื่อหลีกเลี่ยงความไม่สอดคล้องที่อาจเกิดขึ้นหรือภาวะแทรกซ้อนที่ไม่คาดคิด
เพื่อเพิ่มประสิทธิภาพการทำงาน ขอแนะนำให้ยับยั้งการใช้แอนิเมชั่น เนื่องจากการใช้งานมากเกินไปอาจนำไปสู่ผลลัพธ์ที่ไม่พึงประสงค์ แม้ว่าอาจเพิ่มความพึงพอใจให้กับผู้ใช้ก็ตาม
Chart.js: เสริมศักยภาพการแสดงข้อมูลเว็บ
การใช้ Chart.js ช่วยให้สามารถสร้างการแสดงข้อมูลที่น่าดึงดูดและโต้ตอบได้ อำนวยความสะดวกในการชี้แจงข้อมูลเชิงลึกที่เกี่ยวข้องและการสร้างข้อสรุปจากข้อมูล
Chart.js นำเสนอวิธีการที่มีประสิทธิภาพในการแสดงข้อมูลเป็นภาพ โดยไม่คำนึงถึงความเชี่ยวชาญในการเขียนโปรแกรม