Highcharts ব্যবহার করে আপনি Chart এবং Series এর উপরে Mouse Interaction Events যোগ করতে পারেন, যা ব্যবহারকারীদের জন্য আরো ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় অভিজ্ঞতা প্রদান করে। এই ইভেন্টগুলো ব্যবহারকারীদের চার্টের বিভিন্ন অংশের সাথে ইন্টারঅ্যাক্ট করার সুযোগ দেয়, যেমন hover, click, mousemove, mousedown, এবং mouseup ইভেন্ট।
এগুলো বিভিন্ন series বা chart elements এর সাথে সম্পর্কিত হয়ে কাজ করে, যা আপনাকে ডেটা পয়েন্টের সাথে ইন্টারঅ্যাক্ট করার সুযোগ দেয়।
Mouse Interaction Events এর ধরন
- mouseover: যখন মাউস পয়েন্টার চার্টের একটি অংশে চলে আসে।
- mouseout: যখন মাউস পয়েন্টার চার্টের একটি অংশ থেকে চলে যায়।
- click: যখন ব্যবহারকারী চার্টের কোনো এলিমেন্টে ক্লিক করে।
- mousemove: যখন মাউস চার্টের একটি এলিমেন্টের উপর মুভ করে।
- mousedown এবং mouseup: মাউস বাটন প্রেস বা রিলিজ করার ইভেন্ট।
Chart Level Mouse Interaction
Chart এর উপরে mouse interaction ইভেন্টগুলি সংযুক্ত করা হয়। এটি আপনাকে চার্টের মোট এলিমেন্টের উপর ইন্টারঅ্যাকট করতে সক্ষম করে, যেমন chart background, axes, এবং gridlines।
উদাহরণ: Chart Level Interaction
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Mouse Interaction - Chart Level</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line',
events: {
mouseOver: function () {
alert("Mouse Over the Chart!");
},
click: function (e) {
alert("Chart clicked at: " + e.xAxis[0].value + ", " + e.yAxis[0].value);
}
}
},
title: {
text: 'Mouse Interaction at Chart Level'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Values'
}
},
series: [{
name: 'Data Series',
data: [1, 3, 2, 4, 5]
}]
});
</script>
</body>
</html>
এখানে, mouseOver এবং click ইভেন্ট ব্যবহার করা হয়েছে যা পুরো chart এলিমেন্টে ট্রিগার হবে। আপনি যখন চার্টের উপর মাউস নিয়ে আসবেন, তখন একটি অ্যালার্ট বার্তা প্রদর্শিত হবে, এবং ক্লিক করলে চার্টের x এবং y অক্ষের মান প্রদর্শিত হবে।
Series Level Mouse Interaction
Highcharts এর series স্তরের ইভেন্টগুলো ব্যবহৃত হয় যখন আপনি চার্টের data points বা series এর উপর ইন্টারঅ্যাক্ট করতে চান। এতে করে আপনি প্রতিটি data point বা series এর উপরে মাউস ইভেন্ট সংযুক্ত করতে পারবেন।
উদাহরণ: Series Level Interaction
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Mouse Interaction - Series Level</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Mouse Interaction at Series Level'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Values'
}
},
series: [{
name: 'Sales',
data: [1, 3, 2, 4, 5],
events: {
mouseOver: function () {
alert("Mouse Over Series: " + this.name);
},
click: function () {
alert("Series clicked: " + this.name);
}
}
}]
});
</script>
</body>
</html>
এখানে, mouseOver এবং click ইভেন্ট সিরিজের উপরে যোগ করা হয়েছে। যখন আপনি সিরিজের উপরে মাউস নিয়ে আসবেন বা ক্লিক করবেন, তখন তা সিরিজের নামের সাথে সম্পর্কিত একটি অ্যালার্ট প্রদর্শন করবে।
Data Point Level Mouse Interaction
আপনি data points এর উপরও mouse interaction events যোগ করতে পারেন, যা ডেটা পয়েন্টের জন্য কার্যকরী। উদাহরণস্বরূপ, mouseOver, click, এবং mousemove ইভেন্টগুলি ব্যবহার করে আপনি প্রতিটি ডেটা পয়েন্টে ইন্টারঅ্যাক্ট করতে পারেন।
উদাহরণ: Data Point Level Interaction
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Mouse Interaction - Data Point Level</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Mouse Interaction at Data Point Level'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Values'
}
},
series: [{
name: 'Sales',
data: [1, 3, 2, 4, 5],
point: {
events: {
mouseOver: function () {
alert("Mouse Over Point: " + this.category + " Value: " + this.y);
},
click: function () {
alert("Point clicked: " + this.category + " Value: " + this.y);
}
}
}
}]
});
</script>
</body>
</html>
এখানে, point.events.mouseOver এবং point.events.click ব্যবহার করা হয়েছে, যাতে ব্যবহারকারী যখন ডেটা পয়েন্টের উপর মাউস নিয়ে আসবে বা ক্লিক করবে, তখন তার সাথে সম্পর্কিত তথ্য প্রদর্শিত হবে।
উপসংহার
Highcharts এর Mouse Interaction Events দিয়ে আপনি Chart, Series, এবং Data Points এর উপর বিভিন্ন ধরনের মাউস ইভেন্ট যেমন mouseover, click, mousemove ইত্যাদি ব্যবহার করে ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে পারেন। এসব ইভেন্ট ব্যবহারকারীকে চার্টের বিভিন্ন অংশের সাথে ইন্টারঅ্যাক্ট করার সুযোগ দেয় এবং চার্টের অভিজ্ঞতাকে আরও শক্তিশালী এবং আকর্ষণীয় করে তোলে।
Read more
