Highcharts এ Animation এর মাধ্যমে আপনার চার্টের ট্রানজিশন বা পরিবর্তনগুলোকে মসৃণ এবং ইন্টারঅ্যাকটিভ করা যায়। আপনি Custom Timing এবং Duration ব্যবহার করে অ্যানিমেশনকে আরও কাস্টমাইজ করতে পারেন, যাতে চার্টের ডেটা পরিবর্তনের সময় ইন্টারঅ্যাকটিভ অনুভূতি এবং ভালো ভিজ্যুয়াল ইফেক্ট তৈরি হয়।
Highcharts এ Animation কাস্টমাইজ করা
Highcharts এর animation অপশনটি চার্টের রেন্ডারিং প্রক্রিয়া এবং সিরিজের ডেটার পরিবর্তনকে মসৃণভাবে প্রদর্শন করতে ব্যবহৃত হয়। আপনি অ্যানিমেশনটি কাস্টমাইজ করতে পারেন, যেমন অ্যানিমেশনের duration (সময়কাল) এবং timing (টাইমিং ফাংশন)।
1. Duration (সময়কাল) সেট করা
Duration অপশনটি নির্ধারণ করে অ্যানিমেশন চলার মোট সময়কাল। এটি মিলিসেকেন্ডে (ms) নির্ধারণ করা হয়। উদাহরণস্বরূপ, আপনি 1 সেকেন্ডের জন্য অ্যানিমেশন চালাতে চাইলে duration: 1000 ব্যবহার করতে পারেন।
2. Timing Function সেট করা
Timing function বিভিন্ন ধরনের অ্যানিমেশন ইফেক্ট দেয়, যেমন linear (সামান্য গতি) অথবা easeInOut (ধীরে ধীরে শুরু হয়ে শেষ হয়)। Highcharts এ easing কাস্টম টাইমিং ফাংশন হিসেবে ব্যবহৃত হয়।
উদাহরণ: Animation এর জন্য Custom Timing এবং Duration
এখানে একটি উদাহরণ দেওয়া হল যেখানে custom duration এবং custom easing function ব্যবহার করা হয়েছে:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Animation Example</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' // Column chart টাইপ নির্বাচন
},
title: {
text: 'Custom Animation with Timing and Duration'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
plotOptions: {
series: {
animation: {
duration: 1500, // অ্যানিমেশন সময়কাল 1500 মিলিসেকেন্ড (1.5 সেকেন্ড)
easing: 'easeInOutQuart' // কাস্টম টাইমিং ফাংশন
}
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
</script>
</body>
</html>
এখানে:
- duration: 1500: অ্যানিমেশনটি 1.5 সেকেন্ড ধরে চলবে।
- easing: 'easeInOutQuart': অ্যানিমেশনটি ধীরে ধীরে শুরু হয়ে দ্রুত শেষ হবে। এটি একটি কাস্টম টাইমিং ফাংশন।
Highcharts এ Animation এর অন্যান্য Timing এবং Duration অপশন
Timing Functions (easing)
Highcharts এ বিভিন্ন easing অপশন রয়েছে, যার মাধ্যমে আপনি অ্যানিমেশনের গতি নিয়ন্ত্রণ করতে পারেন। কিছু সাধারণ easing ফাংশন:
- linear: সমান গতিতে অ্যানিমেশন।
- easeInQuad: ধীরে ধীরে শুরু হয় এবং পরে দ্রুত হয়।
- easeOutQuad: দ্রুত শুরু হয় এবং পরে ধীরে ধীরে শেষ হয়।
- easeInOutQuad: ধীরে শুরু হয় এবং ধীরে শেষ হয়।
- easeInOutQuart: ধীরে শুরু হয়ে দ্রুত শেষ হয় (যা এই উদাহরণে ব্যবহার করা হয়েছে)।
এটি আপনার চার্টের অ্যানিমেশনের অনুভূতি নিয়ন্ত্রণ করার জন্য বেশ উপকারী।
উদাহরণ: বিভিন্ন Easing Function ব্যবহার করা
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Different Easing Functions</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: 'Different Easing Functions'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
plotOptions: {
series: {
animation: {
duration: 2000, // অ্যানিমেশন সময়কাল 2 সেকেন্ড
easing: 'easeOutBounce' // Bounce ইফেক্ট
}
}
},
series: [{
name: 'Sales',
data: [10, 15, 20, 25, 30]
}]
});
</script>
</body>
</html>
এখানে easeOutBounce টাইমিং ফাংশন ব্যবহার করা হয়েছে, যা অ্যানিমেশনের শেষে একটি "বাউন্স" ইফেক্ট তৈরি করবে।
উপসংহার
Highcharts এ animation ব্যবহার করে আপনি আপনার চার্টে custom timing এবং duration সেট করতে পারেন, যা চার্টের ইন্টারঅ্যাকটিভিটি এবং ভিজুয়াল ইফেক্টকে আরও মসৃণ এবং আকর্ষণীয় করে তোলে। আপনি duration সেট করে অ্যানিমেশনের সময়কাল কাস্টমাইজ করতে পারেন, এবং easing ফাংশন ব্যবহার করে অ্যানিমেশনের গতি এবং অনুভূতি নিয়ন্ত্রণ করতে পারেন। Highcharts এর এই বৈশিষ্ট্যগুলো চার্ট ভিজুয়ালাইজেশনকে আরও শক্তিশালী এবং ব্যবহারকারীদের জন্য আকর্ষণীয় করে তোলে।
Read more
