Chart.js ব্যবহার করে একটি চার্ট তৈরি করা অত্যন্ত সহজ এবং কার্যকর। এখানে প্রথম চার্ট তৈরি করার ধাপগুলো বিশদভাবে আলোচনা করা হলো। আমরা একটি বার (Bar) চার্ট উদাহরণ হিসেবে ব্যবহার করব।
ধাপ ১: প্রজেক্ট সেটআপ
HTML ফাইল তৈরি
প্রথমে একটি HTML ফাইল তৈরি করুন যেখানে আপনার চার্ট রেন্ডার হবে।
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Chart</title>
</head>
<body>
<h1>My First Chart.js Example</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>
ধাপ ২: Chart.js দিয়ে চার্ট তৈরি করা
আপনার চার্ট তৈরি করার জন্য একটি জাভাস্ক্রিপ্ট ফাইল লিখুন। এতে চার্টের ডেটা এবং কনফিগারেশন থাকবে।
script.js
// Chart.js এর মাধ্যমে চার্ট তৈরি করা
const ctx = document.getElementById('myChart').getContext('2d');
// নতুন বার চার্ট তৈরি করা
const myChart = new Chart(ctx, {
type: 'bar', // চার্টের ধরন (Bar Chart)
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'], // এক্স-অক্ষের লেবেল
datasets: [{
label: 'Monthly Sales', // ডেটাসেটের নাম
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: {
responsive: true, // চার্ট রেসপন্সিভ হবে
scales: {
y: {
beginAtZero: true // Y-অক্ষ শূন্য থেকে শুরু হবে
}
}
}
});
ধাপ ৩: প্রজেক্ট চালানো
প্রজেক্ট ফাইল ব্রাউজারে খুলুন। আপনি সরাসরি HTML ফাইলটি খুলতে পারেন অথবা একটি সরল HTTP সার্ভার ব্যবহার করতে পারেন।
সরাসরি ব্রাউজারে ফাইল খুলুন
HTML ফাইলটি ডাবল ক্লিক করে ব্রাউজারে খুলুন। চার্ট প্রদর্শিত হবে।
লাইভ সার্ভার ব্যবহার
Node.js এর live-server দিয়ে প্রজেক্ট চালাতে নিচের কমান্ডটি ব্যবহার করুন:
npx live-server
ধাপ ৪: চার্টের আউটপুট
চার্টটি আপনার ব্রাউজারে প্রদর্শিত হবে। এটি একটি বার চার্ট যা প্রতিটি মাসের বিক্রয়ের ডেটা দেখাবে।
Chart.js এর চার্ট কাস্টমাইজ করা
চার্টটি আরও আকর্ষণীয় করতে আপনি নিচের বৈশিষ্ট্যগুলো কাস্টমাইজ করতে পারেন:
চার্ট টাইপ পরিবর্তন:
বার চার্টের পরিবর্তে লাইন, পাই, ডোনাট ইত্যাদি চার্ট ব্যবহার করতে পারেন।
উদাহরণ:type: 'line'- ডেটাসেট পরিবর্তন:
ডেটা পয়েন্ট বা লেবেল আপডেট করুন। - অ্যানিমেশন যোগ করা:
চার্টে অ্যানিমেশন যুক্ত করতে কনফিগারেশন পরিবর্তন করুন।
সারাংশ
Chart.js দিয়ে প্রথম চার্ট তৈরি করতে খুব বেশি সময় লাগে না। আপনি সহজেই একটি বার চার্ট তৈরি করতে পারবেন এবং তা বিভিন্ন ধরণের কাস্টমাইজেশন করতে পারেন। এটি ছোট থেকে বড় প্রজেক্টে ডেটা ভিজ্যুয়ালাইজেশনের জন্য কার্যকর একটি সমাধান।
Read more
