Chart.js এর মাধ্যমে প্রজেক্ট কনফিগার করা অত্যন্ত সহজ। এটি আপনার ওয়েব বা অ্যাপ্লিকেশন প্রজেক্টে দ্রুত ডেটা ভিজ্যুয়ালাইজেশন যোগ করতে সাহায্য করে। নিচে Chart.js কনফিগার করার ধাপসমূহ বিস্তারিতভাবে ব্যাখ্যা করা হলো।
ধাপ ১: প্রজেক্ট ইনিশিয়ালাইজ করা
প্রথমে একটি নতুন প্রজেক্ট ফোল্ডার তৈরি করুন এবং সেটিকে NPM বা Yarn দিয়ে ইনিশিয়ালাইজ করুন।
NPM দিয়ে ইনিশিয়ালাইজ:
mkdir chartjs-project
cd chartjs-project
npm init -y
Yarn দিয়ে ইনিশিয়ালাইজ:
mkdir chartjs-project
cd chartjs-project
yarn init -y
ধাপ ২: Chart.js ইনস্টল করা
Chart.js ইনস্টল করার জন্য NPM বা Yarn কমান্ড ব্যবহার করুন।
NPM:
npm install chart.js
Yarn:
yarn add chart.js
ধাপ ৩: ফাইল স্ট্রাকচার তৈরি করা
একটি সহজ স্ট্রাকচার তৈরি করুন:
chartjs-project/
├── node_modules/
├── package.json
├── public/
│ ├── index.html
│ ├── styles.css
│ └── script.js
index.html: HTML ফাইল যেখানে<canvas>যোগ করবেন।styles.css: কাস্টম স্টাইলিংয়ের জন্য।script.js: চার্ট কনফিগারেশন এবং লজিকের জন্য।
ধাপ ৪: 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>Chart.js Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Chart.js Project</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="./script.js"></script>
</body>
</html>
ধাপ ৫: Chart.js ইমপোর্ট এবং কনফিগারেশন
script.js
import Chart from 'chart.js/auto';
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // চার্টের টাইপ
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], // এক্স-অক্ষের লেবেল
datasets: [{
label: '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: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
ধাপ ৬: CSS যোগ করা
styles.css
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
canvas {
display: block;
margin: 0 auto;
}
ধাপ ৭: প্রজেক্ট চালানো
Node.js এর live-server বা যেকোনো সরল HTTP সার্ভার ব্যবহার করে প্রজেক্ট চালান।
live-server ব্যবহার:
npx live-server public
ব্রাউজারে দেখুন:
সার্ভার চালু হলে ব্রাউজারে http://localhost:8080 ওপেন করুন।
Chart.js প্রজেক্ট কনফিগারেশনের সুবিধা
- সহজ সেটআপ: NPM/Yarn দিয়ে দ্রুত কনফিগারেশন।
- রেসপন্সিভ চার্ট: স্ক্রিনের আকার অনুযায়ী চার্ট অ্যাডজাস্ট হয়।
- কাস্টমাইজেশন: চার্টের রং, স্টাইল, এবং ডেটা সহজেই পরিবর্তন করা যায়।
- প্রজেক্ট স্ট্রাকচার: মডুলার কোডিং, যা বড় প্রজেক্টের জন্য উপযোগী।
এই ধাপগুলো অনুসরণ করে আপনি Chart.js এর মাধ্যমে একটি প্রজেক্ট সহজেই তৈরি এবং পরিচালনা করতে পারবেন। এটি আপনাকে ডেটা ভিজ্যুয়ালাইজেশনের একটি কার্যকরী সমাধান প্রদান করবে।
Content added By
Read more
