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
