Chart.js আপনাকে ইন্টার্যাকটিভ চার্ট তৈরি করার সুবিধা প্রদান করে, যেখানে ব্যবহারকারীরা চার্টের সাথে ইন্টার্যাক্ট করতে পারে। এছাড়াও, Chart.js-এ শক্তিশালী অ্যানিমেশন ফিচার রয়েছে, যা চার্টে ডেটা আপডেট করার সময় মসৃণ অ্যানিমেশন প্রভাব তৈরি করতে সাহায্য করে। এই দুটি ফিচারই Chart.js-কে আরও আকর্ষণীয় এবং ইউজার-ফ্রেন্ডলি করে তোলে।
1. Chart.js এর Interaction (ইন্টার্যাকশন)
Chart.js ব্যবহারকারীর ইন্টার্যাকশনকে সহজ ও কার্যকরী করতে বিভিন্ন অপশন প্রদান করে, যার মাধ্যমে ব্যবহারকারী চার্টের উপর হোভার বা ক্লিক করেও তথ্য পেতে পারেন। এই ফিচারটি মূলত tooltips, hover effects, এবং click events এর মাধ্যমে কাজ করে।
১.১ Tooltips (টুলটিপস)
Tooltips হল সেই তথ্য যা ব্যবহারকারী চার্টের কোন পয়েন্টে মাউস হোভার করলে প্রদর্শিত হয়। Chart.js-এ tooltips কাস্টমাইজ করতে আপনি tooltips অপশন ব্যবহার করতে পারেন।
উদাহরণ: Tooltips কাস্টমাইজেশন
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Green', 'Yellow'],
datasets: [{
label: 'Votes',
data: [12, 19, 3, 5],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `Category: ${tooltipItem.label}, Value: ${tooltipItem.raw}`;
}
}
}
}
}
});
টুলটিপ কাস্টমাইজেশন:
label: টুলটিপের কন্টেন্ট কাস্টমাইজ করার জন্য callbacks ব্যবহার করা হয়েছে।- আপনি এখানে অতিরিক্ত তথ্য বা বিশেষ ফরম্যাটেও ডেটা প্রদর্শন করতে পারেন।
১.২ Hover Effect (হোভার ইফেক্ট)
Hover Effect ব্যবহারকারী যখন চার্টের কোন এলিমেন্টে মাউস হোভার করে তখন একাধিক কাস্টমাইজেশন করা যায়। যেমন, বার বা পয়েন্টের রঙ পরিবর্তন করা বা কোন বিশেষ অ্যানিমেশন প্রদর্শন করা।
উদাহরণ: Hover effect কাস্টমাইজেশন
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Green', 'Yellow'],
datasets: [{
label: 'Votes',
data: [12, 19, 3, 5],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
interaction: {
mode: 'nearest', // হোভার করার সময় nearest data পয়েন্ট নির্বাচন হবে
intersect: false // চার্টের ভিতরে বা বাইরে কোথাও হোভার করা যাবে
}
}
});
কাস্টমাইজেশন:
mode: 'nearest': এটি নির্ধারণ করে যে, হোভার করলে নিকটতম ডেটা পয়েন্ট নির্বাচন করা হবে।intersect: false: এটি চার্টের পয়েন্টের বাইরেও হোভার করার অনুমতি দেয়।
১.৩ Click Events (ক্লিক ইভেন্ট)
Chart.js ক্লিক ইভেন্টও সাপোর্ট করে, যা দিয়ে ব্যবহারকারী চার্টের উপর ক্লিক করলে ডেটা অ্যাক্সেস বা নির্দিষ্ট অ্যাকশন ট্রিগার করা যায়।
উদাহরণ: Click event কাস্টমাইজেশন
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Red', 'Blue', 'Green'],
datasets: [{
data: [30, 40, 30],
backgroundColor: ['red', 'blue', 'green']
}]
},
options: {
onClick: function(e, elements) {
if (elements.length > 0) {
const elementIndex = elements[0].index;
const label = myChart.data.labels[elementIndex];
const value = myChart.data.datasets[0].data[elementIndex];
alert(`You clicked on ${label} with value ${value}`);
}
}
}
});
কাস্টমাইজেশন:
onClick: ব্যবহারকারী যখন চার্টের উপর ক্লিক করবেন, তখন একটি নির্দিষ্ট কার্যক্রম ট্রিগার হবে। এখানে, clicked data পয়েন্টের লেবেল এবং মান প্রদর্শন করা হচ্ছে।
2. Chart.js এর Animation (অ্যানিমেশন)
Chart.js এ অ্যানিমেশন সেটিংস দ্বারা আপনি চার্টের উপাদানগুলোতে কীভাবে পরিবর্তন হবে তা নিয়ন্ত্রণ করতে পারেন। অ্যানিমেশন ডেটা আপডেট করার সময় খুবই গুরুত্বপূর্ণ, কারণ এটি ব্যবহারকারীর অভিজ্ঞতাকে মসৃণ এবং আকর্ষণীয় করে তোলে।
২.১ অ্যানিমেশন কাস্টমাইজেশন
Chart.js-এ animation অপশন ব্যবহার করে আপনি অ্যানিমেশনের সময়কাল, easing ফাংশন এবং অন্যান্য প্রভাব নিয়ন্ত্রণ করতে পারেন।
উদাহরণ: অ্যানিমেশন কাস্টমাইজেশন
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April'],
datasets: [{
label: 'Sales Data',
data: [12, 19, 3, 5],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
animation: {
duration: 1500, // অ্যানিমেশন সময়কাল
easing: 'easeOutBounce' // অ্যানিমেশন ইফেক্ট
}
}
});
কাস্টমাইজেশন:
duration: অ্যানিমেশনের সময়কাল নির্ধারণ করে (মিলিসেকেন্ডে)।easing: অ্যানিমেশনের গতি নিয়ন্ত্রণ করার জন্য (যেমন:easeInOutQuad,easeOutBounceইত্যাদি)।
২.২ ডাইনামিক অ্যানিমেশন (Dynamic Animation)
আপনি onUpdate ক্যালব্যাক ফাংশন ব্যবহার করে অ্যানিমেশন চলাকালীন কিছু ডাইনামিক পরিবর্তন করতে পারেন। এটি বিশেষত উপকারী যখন আপনি চার্টের ডেটা আপডেট করতে চান এবং সেটা অ্যানিমেটেডভাবে প্রদর্শন করতে চান।
উদাহরণ: ডাইনামিক অ্যানিমেশন
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April'],
datasets: [{
label: 'Sales Data',
data: [10, 20, 30, 40],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true,
animation: {
onProgress: function(animation) {
console.log('Animation Progress:', animation.animationObject.currentStep);
}
}
}
});
সারাংশ
Chart.js এ Interaction এবং Animation দুইটি প্রধান ফিচার রয়েছে, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে এবং চার্টকে আরও ইন্টার্যাকটিভ ও আকর্ষণীয় করে তোলে।
- Interaction: Chart.js ব্যবহারকারীর ইন্টার্যাকশন সমর্থন করে, যার মধ্যে tooltips, hover effects, এবং click events অন্তর্ভুক্ত।
- Animation: Chart.js-এর অ্যানিমেশন ফিচার ব্যবহার করে চার্টের উপাদানগুলি সুন্দরভাবে প্রদর্শন করা যায়। আপনি অ্যানিমেশনের সময়কাল, গতি এবং অন্যান্য প্যারামিটার কাস্টমাইজ করতে পারেন।
এই ফিচারগুলি চার্টকে আরও ব্যবহারকারীর জন্য উপযোগী এবং দৃষ্টিনন্দন করে তোলে।
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 ব্যবহার করে বিশেষ ধরনের অ্যানিমেশন তৈরি করা যেতে পারে।
এটি ডেটার ভিজ্যুয়ালাইজেশনকে আরও আকর্ষণীয় এবং ইন্টার্যাকটিভ করে তুলতে সহায়তা করে।
Chart.js আপনাকে কাস্টম অ্যানিমেশন তৈরি করার জন্য বিভিন্ন ধরনের animation options এবং callback functions প্রদান করে, যার মাধ্যমে আপনি চার্টের অ্যানিমেশন এবং ইন্টারঅ্যাকশন কাস্টমাইজ করতে পারেন। এই ফিচারগুলো দিয়ে আপনি চার্টের অ্যানিমেশন ইফেক্ট, টাইমিং, এবং আচরণ সম্পূর্ণভাবে কাস্টমাইজ করতে পারেন।
১. Custom Animation Options
Chart.js-এ অ্যানিমেশন কাস্টমাইজ করা খুবই সহজ। আপনি animation অপশন ব্যবহার করে চার্টের অ্যানিমেশন ইফেক্ট কাস্টমাইজ করতে পারেন। এটি বিভিন্ন সময়কাল, টাইমিং ফাংশন এবং আক্রমণ পদ্ধতির মাধ্যমে চার্টের অ্যানিমেশন প্রদর্শন করে।
অ্যানিমেশন কনফিগারেশন:
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Green', 'Yellow', 'Purple'],
datasets: [{
label: 'Votes',
data: [12, 19, 3, 5, 2],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
animation: {
duration: 2000, // অ্যানিমেশন চলার সময়কাল (মিলিসেকেন্ড)
easing: 'easeInOutBounce', // অ্যানিমেশন ইফেক্ট টাইমিং (যেমন: easeInOutQuad, easeOutBounce)
onProgress: function(animation) { // অ্যানিমেশন প্রগ্রেস কাস্টমাইজ করার জন্য callback function
console.log('Animation Progress: ' + animation.currentStep / animation.numSteps);
},
onComplete: function() { // অ্যানিমেশন সম্পূর্ণ হলে callback function
console.log('Animation Completed!');
}
}
}
});
ব্যাখ্যা:
duration: অ্যানিমেশন সম্পূর্ণ হওয়ার সময়কাল (মিলিসেকেন্ডে) নির্ধারণ করে।easing: অ্যানিমেশন টাইমিং ফাংশন, যা অ্যানিমেশনের গতি নির্ধারণ করে। উদাহরণস্বরূপ,easeInOutBounceএকটি বাউন্সি টাইমিং ফাংশন।onProgress: অ্যানিমেশন চলাকালীন প্রতিটি স্টেপের অগ্রগতি দেখানোর জন্য callback function।onComplete: অ্যানিমেশন শেষ হলে কলব্যাক ফাংশন।
২. Callback Functions
Chart.js-এ callback functions ব্যবহার করে আপনি অ্যানিমেশন, টুলটিপ, লেজেন্ড, স্কেল ইত্যাদির আচরণ কাস্টমাইজ করতে পারেন। এগুলো অনেক কাস্টমাইজেশনের জন্য শক্তিশালী টুল।
২.১. Animation Callbacks
আপনি অ্যানিমেশন চলাকালীন onProgress এবং onComplete কলব্যাক ফাংশন ব্যবহার করতে পারেন।
options: {
animation: {
duration: 1500,
easing: 'easeInOutQuad',
onProgress: function(animation) {
console.log('Progress: ' + (animation.currentStep / animation.numSteps) * 100 + '%');
},
onComplete: function() {
console.log('Animation completed!');
}
}
}
২.২. Tooltip Callback
Tooltip-এর কাস্টম কনটেন্ট এবং আচরণ কাস্টমাইজ করতে আপনি callback functions ব্যবহার করতে পারেন। যেমন, tooltip এর কন্টেন্ট পরিবর্তন করা:
options: {
plugins: {
tooltip: {
callbacks: {
label: function(tooltipItem) {
// Tooltip label কাস্টমাইজ করা
return 'Custom Label: ' + tooltipItem.raw + ' units';
}
}
}
}
}
২.৩. Legend Callback
Chart.js-এ Legend কাস্টমাইজেশনেও callback ব্যবহার করা যেতে পারে:
options: {
plugins: {
legend: {
labels: {
generateLabels: function(chart) {
// লেজেন্ড লেবেল কাস্টমাইজ করা
const labels = chart.data.labels;
return labels.map((label, index) => {
return {
text: 'Custom Legend: ' + label,
fillStyle: chart.data.datasets[0].backgroundColor[index],
index: index
};
});
}
}
}
}
}
৩. Custom Animation Effects
Chart.js-এ অ্যানিমেশন ইফেক্ট কাস্টমাইজ করার জন্য আপনি টাইমিং ফাংশন এবং custom easing ব্যবহার করতে পারেন।
টাইমিং এবং easing:
Chart.js কিছু predefined easing ফাংশন প্রদান করে, কিন্তু আপনি custom easing functions ব্যবহার করেও অ্যানিমেশন তৈরি করতে পারেন।
options: {
animation: {
duration: 2000,
easing: function(t) {
return t * t * t; // Cubic easing
}
}
}
এটি একটি কাস্টম কিউবিক easing ফাংশন যা অ্যানিমেশনকে ধীরে শুরু হতে এবং দ্রুত শেষ হতে সাহায্য করবে।
৪. Custom Animation Transitions
Chart.js-এ অ্যানিমেশন ট্রানজিশন কাস্টমাইজ করতে, আপনি animation.duration, animation.easing, এবং animation.onComplete ফাংশনগুলি সমন্বয় করতে পারেন, যাতে অ্যানিমেশনকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করা যায়।
সারাংশ
Chart.js-এ Custom Animation Options এবং Callback Functions ব্যবহার করে আপনি আপনার চার্টের অ্যানিমেশন এবং ইন্টারঅ্যাকশনকে কাস্টমাইজ করতে পারেন। এই কাস্টমাইজেশন আপনাকে অ্যানিমেশনের সময়কাল, টাইমিং, এবং আচরণ নিয়ন্ত্রণ করতে সাহায্য করে। Callback Functions এর মাধ্যমে আপনি লেজেন্ড, টুলটিপ, স্কেল ইত্যাদির আচরণ কাস্টমাইজ করতে পারবেন, যা আপনার চার্টকে আরও ইন্টারঅ্যাকটিভ এবং পেশাদারী করে তোলে।
Chart.js এর মাধ্যমে আপনি Hover এবং Click Events ব্যবহার করে চার্টে ইন্টার্যাকটিভিটি যোগ করতে পারেন। এই ইভেন্টগুলোর মাধ্যমে ব্যবহারকারী ডেটার সাথে ইন্টার্যাক্ট করতে পারেন, যেমন কোনো পয়েন্ট বা বুদবুদে হোভার বা ক্লিক করার মাধ্যমে ডেটার আরও বিশদ দেখতে পারেন।
Chart.js এ হোভার এবং ক্লিক ইভেন্ট গুলি onHover এবং onClick ফাংশন দ্বারা কাস্টমাইজ করা যায়।
Hover Event
Hover ইভেন্ট ব্যবহারকারীর মাউসের মাধ্যমে কোনো ডেটা পয়েন্টের উপরে আসলে ট্রিগার হয়। এই ইভেন্টে আপনি ব্যবহারকারীর মাউস পয়েন্টারের অবস্থান অনুযায়ী বিভিন্ন ধরণের কাজ করতে পারেন, যেমন টুলটিপের পরিবর্তন বা কোনো কাস্টম ইফেক্ট যোগ করা।
উদাহরণ: Hover Event দিয়ে টুলটিপ কাস্টমাইজ করা
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // বার চার্ট
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
datasets: [{
label: 'Votes',
data: [12, 19, 3, 5, 2],
backgroundColor: ['red', 'blue', 'yellow', 'green', 'purple']
}]
},
options: {
responsive: true,
plugins: {
tooltip: {
enabled: true,
mode: 'nearest',
position: 'nearest'
}
},
// Hover Event কাস্টমাইজেশন
hover: {
onHover: function (event, chartElement) {
if (chartElement.length) {
// ব্যবহারকারী যখন পয়েন্টে হোভার করবেন, তখন টুলটিপ প্রদর্শন হবে
console.log('Hovered over:', chartElement[0]);
event.target.style.cursor = 'pointer'; // মাউস পয়েন্টার পরিবর্তন
} else {
event.target.style.cursor = 'default'; // মাউস পয়েন্টার ডিফল্ট অবস্থায় থাকবে
}
}
}
}
});
এখানে:
onHoverফাংশন ব্যবহারকারীর মাউস পয়েন্টার এক্স ও ওয়াই পজিশন অনুযায়ী ট্রিগার হয়।event.target.style.cursorদিয়ে মাউস পয়েন্টার পরিবর্তন করা হচ্ছে।
Click Event
Click ইভেন্ট ব্যবহারকারী যখন চার্টে কোনো পয়েন্টে ক্লিক করেন, তখন ট্রিগার হয়। এই ইভেন্টের মাধ্যমে আপনি ব্যবহারকারীকে কোনো নির্দিষ্ট ডেটা বা অন্যান্য তথ্য প্রদর্শন করতে পারেন।
উদাহরণ: Click Event দিয়ে ডেটা পয়েন্টের বিস্তারিত দেখানো
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // বার চার্ট
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
datasets: [{
label: 'Votes',
data: [12, 19, 3, 5, 2],
backgroundColor: ['red', 'blue', 'yellow', 'green', 'purple']
}]
},
options: {
responsive: true,
onClick: function (event, chartElement) {
if (chartElement.length) {
const index = chartElement[0].index; // clicked bar index
const label = this.data.labels[index]; // clicked label
const value = this.data.datasets[0].data[index]; // clicked value
console.log(`You clicked on ${label} with value ${value}`);
alert(`You clicked on ${label} with value ${value}`);
}
}
}
});
এখানে:
onClickইভেন্ট ব্যবহার করা হয়েছে যা ক্লিক করা পয়েন্টের ডেটা নিয়ে কাজ করবে।chartElement[0].indexব্যবহার করে কোন বারে ক্লিক করা হয়েছে তা সনাক্ত করা হচ্ছে।
Hover এবং Click Events একসাথে ব্যবহার করা
Chart.js-এ আপনি একই চার্টে Hover এবং Click ইভেন্ট একসাথে ব্যবহার করতে পারেন, যাতে আপনি দুটি ইন্টার্যাকশন একসাথে কাস্টমাইজ করতে পারেন।
উদাহরণ: Hover এবং Click Events একসাথে কাস্টমাইজ করা
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line', // লাইন চার্ট
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Monthly Sales',
data: [30, 45, 70, 90, 100],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true,
plugins: {
tooltip: {
enabled: true
}
},
hover: {
onHover: function (event, chartElement) {
if (chartElement.length) {
event.target.style.cursor = 'pointer'; // মাউস পয়েন্টার পরিবর্তন
} else {
event.target.style.cursor = 'default';
}
}
},
onClick: function (event, chartElement) {
if (chartElement.length) {
const index = chartElement[0].index;
const label = this.data.labels[index];
const value = this.data.datasets[0].data[index];
alert(`You clicked on ${label} with value ${value}`);
}
}
}
});
এখানে:
onHoverএবংonClickইভেন্ট দুইটি একসাথে ব্যবহার করা হয়েছে।hoverব্যবহারকারী যখন মাউস পয়েন্টার নিয়ে আসে তখন ইন্টার্যাকশন হবে।clickব্যবহারকারী ক্লিক করলে পয়েন্টের মান এবং লেবেল প্রদর্শিত হবে।
সারাংশ
Chart.js-এ Hover এবং Click ইভেন্টের মাধ্যমে আপনি চার্টের ইন্টার্যাক্টিভিটি কাস্টমাইজ করতে পারেন।
- Hover ইভেন্টটি মাউস পয়েন্টারের অবস্থান অনুসারে ট্রিগার হয় এবং টুলটিপ বা পয়েন্টের উপর কাস্টম ইফেক্ট তৈরি করা যায়।
- Click ইভেন্টটি যখন ব্যবহারকারী চার্টে ক্লিক করেন তখন নির্দিষ্ট পয়েন্টের ডেটা প্রদর্শন করা যায়।
এই ইভেন্টগুলোর মাধ্যমে Chart.js এর চার্ট আরও ইন্টার্যাক্টিভ এবং ব্যবহারকারী-বান্ধব হয়ে ওঠে।
Chart.js এর সাথে interaction events হ্যান্ডলিং একটি গুরুত্বপূর্ণ ফিচার, যা ব্যবহারকারীদের চার্টের সাথে ইন্টার্যাক্ট করতে দেয় এবং ডেটা পয়েন্ট, টুলটিপ, বা অন্যান্য ভিজ্যুয়াল উপাদান থেকে তথ্য প্রদর্শন করতে সহায়ক। Chart.js বিভিন্ন ইভেন্ট যেমন click, hover, এবং tooltip ইভেন্ট সাপোর্ট করে, যার মাধ্যমে আপনি চার্টের সাথে ব্যবহারকারী ইন্টার্যাকশন হ্যান্ডল করতে পারেন।
এই টিউটোরিয়ালে আমরা দেখব কীভাবে Chart.js-এ interaction events হ্যান্ডল করা যায়।
1. Hover Event Handling
Chart.js এ hover ইভেন্ট ব্যবহারকারীর মাউস পয়েন্টারের চার্টের কোনো পয়েন্টের উপরে আসলে ট্রিগার হয়। এই ইভেন্টটি আপনি ব্যবহার করে ডেটা পয়েন্টগুলির উপর হোভার করলে টুলটিপ বা কাস্টম অ্যাকশন চালাতে পারেন।
উদাহরণ: Hover Event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Hover Event</title>
</head>
<body>
<h1>Hover over a bar to see the tooltip!</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
tooltip: {
enabled: true,
mode: 'nearest',
}
},
interaction: {
mode: 'index', // Interaction mode for hover
intersect: false, // True if interaction should only happen at the intersection of the axes
}
}
});
// Event listener for hover
myChart.canvas.addEventListener('mousemove', (event) => {
const points = myChart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, true);
if (points.length) {
const point = points[0];
console.log(`Hovered over ${myChart.data.labels[point.index]} with value: ${myChart.data.datasets[point.datasetIndex].data[point.index]}`);
}
});
</script>
</body>
</html>
ব্যাখ্যা:
interaction.mode: এই সেটিংটি ইন্টার্যাকশন মোড নির্ধারণ করে।'index'মুডে, এক্স-অক্ষের সমস্ত পয়েন্টের জন্য হোভার করলে একটি টুলটিপ প্রদর্শিত হবে।hoverevent:mousemoveইভেন্টের মাধ্যমে মাউস পয়েন্টারের চার্টের উপর অবস্থান ট্র্যাক করা হচ্ছে, এবং প্রাসঙ্গিক ডেটা পয়েন্টের মান কনসোলে আউটপুট হচ্ছে।
2. Click Event Handling
Click event তখন ট্রিগার হয় যখন ব্যবহারকারী চার্টের কোনো পয়েন্টে ক্লিক করেন। এই ইভেন্টের মাধ্যমে ব্যবহারকারীর ক্লিক করা ডেটা পয়েন্টের উপর কাস্টম অ্যাকশন বা ইনফরমেশন প্রদর্শন করা যায়।
উদাহরণ: Click Event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Click Event</title>
</head>
<body>
<h1>Click on a bar to see the data!</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
tooltip: {
enabled: true,
}
}
}
});
// Event listener for click
myChart.canvas.addEventListener('click', (event) => {
const points = myChart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, true);
if (points.length) {
const point = points[0];
alert(`You clicked on ${myChart.data.labels[point.index]} with value: ${myChart.data.datasets[point.datasetIndex].data[point.index]}`);
}
});
</script>
</body>
</html>
ব্যাখ্যা:
clickevent:canvas.addEventListener('click', ...)ব্যবহার করা হয়েছে, যেখানে ক্লিক করা পয়েন্টের জন্য ডেটা প্রদর্শিত হবে।
3. Tooltip Interaction
Tooltip হচ্ছে Chart.js এর একটি গুরুত্বপূর্ণ ফিচার, যা যখন ব্যবহারকারী চার্টের উপর হোভার বা ক্লিক করেন, তখন সেই পয়েন্টের সম্পর্কিত অতিরিক্ত তথ্য প্রদর্শন করে।
উদাহরণ: Tooltip কাস্টমাইজেশন
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Tooltip Example</title>
</head>
<body>
<h1>Hover over the chart to see the tooltip!</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
tooltip: {
enabled: true,
backgroundColor: 'rgba(0,0,0,0.7)', // Tooltip background color
titleColor: 'white', // Tooltip title color
bodyColor: 'white', // Tooltip body text color
callbacks: {
// Custom callback to display additional info in tooltip
label: function(tooltipItem) {
return `Votes: ${tooltipItem.raw}`;
}
}
}
}
}
});
</script>
</body>
</html>
ব্যাখ্যা:
tooltip.callbacks.label: এখানে কাস্টম টুলটিপ তৈরি করা হয়েছে, যা ব্যবহারকারীর জন্য ডেটা ভ্যালু বা অন্যান্য ইনফরমেশন প্রদর্শন করবে।
4. Interactive Mode
Chart.js এ interaction.mode এবং interaction.intersect অপশন ব্যবহার করে আপনি ইন্টার্যাকশন সিস্টেম কাস্টমাইজ করতে পারেন।
mode: ইন্টার্যাকশন মুড নিয়ন্ত্রণ করে যেমন'nearest','index','dataset'ইত্যাদি।intersect: ইন্টার্যাকশনটি শুধুমাত্র তখন হবে যখন মাউস পয়েন্ট চার্টের পয়েন্টে সঠিকভাবে ইন্টারসেপ্ট করবে।
সারাংশ
Chart.js এর মাধ্যমে ইন্টার্যাকশন ইভেন্টগুলি হ্যান্ডল করা খুবই সহজ এবং শক্তিশালী। আপনি hover, click, tooltip ইত্যাদি ইভেন্টের মাধ্যমে ব্যবহারকারীর ইন্টার্যাকশন অনুযায়ী কাস্টম অ্যাকশন করতে পারেন। এর মাধ্যমে আপনি আপনার চার্টে আরও ইন্টার্যাকটিভ এবং তথ্যপূর্ণ ফিচার যোগ করতে পারবেন, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করবে।
Read more
