Chart.js ডিফল্টভাবে বিভিন্ন ধরনের অ্যানিমেশন ইফেক্ট প্রদান করে, যা চার্টে ডেটা লোড করার সময় দৃশ্যমানতা এবং ইন্টার্যাকটিভিটি উন্নত করে। আপনি Chart.js এর অ্যানিমেশন কাস্টমাইজ করতে পারেন, যেমন অ্যানিমেশনের টাইপ, সময়কাল, ইজিং ফাংশন ইত্যাদি। এটি ডেটা পরিবর্তনের সময় বা চার্ট রেন্ডারিংয়ের সময় আরও গতিশীল অভিজ্ঞতা প্রদান করে।
Default Animation কাস্টমাইজেশন
Chart.js এ ডিফল্ট অ্যানিমেশন কাস্টমাইজ করতে, আপনাকে options.animation সেটিংস ব্যবহার করতে হবে। এখানে আপনি অ্যানিমেশনের সময়কাল, ইজিং ফাংশন, এবং অ্যানিমেশনের প্রক্রিয়া কাস্টমাইজ করতে পারেন।
Basic Animation কাস্টমাইজেশন উদাহরণ
নিচে একটি উদাহরণ দেওয়া হলো, যেখানে একটি বার চার্ট তৈরি করা হয়েছে এবং তার ডিফল্ট অ্যানিমেশন কাস্টমাইজ করা হয়েছে।
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 Custom Animation</title>
</head>
<body>
<h1>Chart.js Custom Animation</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>
JavaScript ফাইল: Default Animation কাস্টমাইজেশন
script.js:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // Chart type: Bar Chart
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
datasets: [{
label: 'Votes',
data: [12, 19, 3, 5, 2],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
animation: {
duration: 2000, // অ্যানিমেশনের সময়কাল (2 সেকেন্ড)
easing: 'easeOutBounce', // ইজিং ফাংশন, যেমন easeInOutQuad, easeOutBounce ইত্যাদি
// অন্যান্য কাস্টম অ্যানিমেশন কনফিগারেশন
onProgress: function(animation) {
console.log('Animation progress:', animation);
},
onComplete: function() {
console.log('Animation Complete!');
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
Animation কাস্টমাইজেশন অপশন
Chart.js-এ অ্যানিমেশন কাস্টমাইজ করার জন্য বিভিন্ন অপশন রয়েছে। প্রধান কিছু অপশন নিচে উল্লেখ করা হলো:
১. duration:
এটি অ্যানিমেশনের সময়কাল নির্ধারণ করে। এটি মিলিসেকেন্ডে নির্ধারণ করা হয়।
animation: {
duration: 2000 // অ্যানিমেশন চলবে 2 সেকেন্ড
}
২. easing:
অ্যানিমেশন প্রক্রিয়ার গতি নির্ধারণ করে। Chart.js বিভিন্ন ইজিং ফাংশন সাপোর্ট করে, যেমন:
linear: একটানা গতি।easeInOutQuad: ধীরে ধীরে শুরু এবং শেষ।easeOutBounce: শেষের দিকে একটি ঝাঁকুনি দেয়।
animation: {
easing: 'easeOutBounce' // বাউন্স আউট ইফেক্ট
}
৩. onProgress:
অ্যানিমেশন চলাকালীন প্রগ্রেস মেট্রিক্স ট্র্যাক করার জন্য ব্যবহৃত হয়। এটি একটি ফাংশন গ্রহণ করে যা অ্যানিমেশন প্রগ্রেস রিপোর্ট করে।
animation: {
onProgress: function(animation) {
console.log('Animation progress:', animation);
}
}
৪. onComplete:
অ্যানিমেশন সম্পূর্ণ হওয়ার পর এটি কল হয়। এটি অ্যানিমেশন শেষে কাস্টম ফাংশন কল করার জন্য ব্যবহার করা হয়।
animation: {
onComplete: function() {
console.log('Animation Complete!');
}
}
Advanced Animation কাস্টমাইজেশন
Chart.js আরও উন্নত কাস্টম অ্যানিমেশন কৌশল সরবরাহ করে, যেমন:
১. animation.animateScale:
এটি চার্টের আকারের পরিবর্তন (যেমন এক্সপ্যান্ড বা কনট্রাক্ট) অ্যানিমেট করতে ব্যবহৃত হয়।
animation: {
animateScale: true // চার্টের সাইজ অ্যানিমেট হবে
}
২. animation.animateRotate:
পাই বা ডোনাট চার্টের ক্ষেত্রে অ্যানিমেশন শুরু হওয়ার সময় রোটেটেশন ইফেক্ট প্রয়োগ করতে ব্যবহৃত হয়।
animation: {
animateRotate: true // রোটেটিং অ্যানিমেশন
}
কাস্টম অ্যানিমেশন তৈরি
Chart.js আপনাকে কাস্টম অ্যানিমেশন তৈরি করার সুযোগ দেয়। আপনি কাস্টম টাইমলাইন, অ্যানিমেশন ফাংশন এবং অন্যান্য অ্যানিমেশন প্রভাব কনফিগার করে চার্টের অ্যানিমেশন তৈরি করতে পারেন।
animation: {
duration: 1500, // অ্যানিমেশন সময়কাল
easing: 'easeInOutQuad', // কাস্টম ইজিং ফাংশন
onComplete: function() {
console.log('Custom Animation Complete!');
}
}
সারাংশ
Chart.js এর ডিফল্ট অ্যানিমেশন কাস্টমাইজ করা খুবই সহজ এবং এটি চার্টের ইউজার এক্সপেরিয়েন্স উন্নত করে। আপনি duration, easing, onProgress, এবং onComplete অপশনগুলো ব্যবহার করে অ্যানিমেশন কাস্টমাইজ করতে পারেন। এছাড়া আরও উন্নত কাস্টম অ্যানিমেশন যেমন animateScale এবং animateRotate ব্যবহার করে বিশেষ ধরনের অ্যানিমেশন তৈরি করা যেতে পারে।
এটি ডেটার ভিজ্যুয়ালাইজেশনকে আরও আকর্ষণীয় এবং ইন্টার্যাকটিভ করে তুলতে সহায়তা করে।
Read more
