ভূমিকা
Chart.js একটি জনপ্রিয় ওপেন-সোর্স JavaScript লাইব্রেরি যা ওয়েবসাইটে অ্যানিমেটেড, ইন্টারঅ্যাক্টিভ চার্ট এবং গ্রাফ যোগ করার জন্য ব্যবহার করা হয়। এটি HTML5 Canvas API ব্যবহার করে রেন্ডার করে এবং রেসপন্সিভ ডিজাইন সাপোর্ট করে।
স্থাপন (Installation)
CDN ব্যবহার করে সহজেই প্রজেক্টে যোগ করা যায়:
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>অথবা npm ব্যবহার করে: npm install chart.js
বার চার্ট উদাহরণ
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</head>
<body>
<canvas id="myChart" width="500" height="300"></canvas>
<script type="text/javascript">
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["2005", "2007", "2009", "2012", "2014"],
datasets: [{
label: 'গৃহস্থালি আয়',
data: [5000, 8000, 10000, 1200, 15000],
backgroundColor: [
'rgba(255, 129, 102, 1)',
'rgba(234, 162, 235, 1)',
'rgba(255, 206, 36, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>কোড ব্যাখ্যা
১. ক্যানভাস এলিমেন্ট
<canvas id="myChart"> - চার্ট রেন্ডার করার জন্য ক্যানভাস তৈরি করা হয়েছে।
২. Chart কনফিগারেশন
- type: 'bar' - বার চার্ট টাইপ নির্বাচন
- labels - X-অক্ষের লেবেলগুলো (বছর)
- datasets - ডেটা সেটস আযে, প্রতিটিতে লেবেল, ডেটা এবং রঙ থাকে
- backgroundColor - প্রতিটি বারের রঙ (RGBA ফরম্যাটে)
- options.scales.yAxes.ticks.beginAtZero - Y-অক্ষ শূন্য থেকে শুরু হবে
Chart.js-এ উপলব্ধ চার্ট টাইপগুলো
- line - লাইন চার্ট
- bar - বার চার্ট
- pie - পাই চার্ট
- doughnut - ডোনাট চার্ট
- radar - রডার চার্ট
- polarArea - পোলার এরিয়া চার্ট
- scatter - স্ক্যাটার প্লট
- bubble - বাবল চার্ট
উন্নত ফিচারগুলো
- অ্যানিমেশন - ডিফল্ট স্মুথ অ্যানিমেশন
- টুলটিপ - হোভার করলে ডেটা দেখায়
- লেজেন্ড - ডেটা সেটের লেজেন্ড স্বয়ংক্রিয়
- রেসপন্সিভ - স্ক্রিন সাইজ অনুযায়ী রিসাইজ
- প্লাগইন সিস্টেম - কাস্টমাইজেশনের জন্য প্লাগইন সাপোর্ট
ভার্সন ৩+ এ পরিবর্তন
Chart.js v3+ এ কিছু ব্রেকিং চেঞ্জস আছে:
yAxesএর বদলেscales.yব্যবহার- ট্রি শেকিং (tree shaking) সাপোর্ট
- টাইপস্ক্রিপ্ট সাপোর্ট উন্নত
আউটপুট
উপরের কোডটি একটি সুন্দর বার চার্ট তৈরি করবে যেখানে ৫ বছরের গৃহস্থালি আয় দেখানো হয়েছে, প্রতিটি বার ভিন্ন রঙের।
