Highcharts এ chart size এবং layout ডায়নামিকভাবে কাস্টমাইজ করা সম্ভব, যাতে চার্টটি বিভিন্ন স্ক্রীন সাইজে এবং পরিস্থিতিতে উপযুক্তভাবে রেন্ডার হয়। এই ফিচারটি আপনাকে responsive design তৈরি করতে সহায়ক, যা মোবাইল, ট্যাবলেট, এবং ডেস্কটপে সুন্দরভাবে কাজ করে। Highcharts এ আপনি চার্টের আকার, লেআউট, এবং অন্যান্য বৈশিষ্ট্যগুলো স্ক্রীন সাইজ বা ডিভাইসের ধরন অনুসারে পরিবর্তন করতে পারেন।
Chart Size এবং Layout এর জন্য Dynamic Adjustments
Highcharts এ chart size এবং layout ডায়নামিকভাবে কাস্টমাইজ করতে সাধারণত দুটি উপায় ব্যবহার করা হয়:
- Responsive Options: Highcharts এর
responsiveঅপশন ব্যবহার করে, চার্টের আকার এবং অন্যান্য বৈশিষ্ট্য স্ক্রীন সাইজের ওপর ভিত্তি করে পরিবর্তন করা যায়। - Resize Event: JavaScript কোড ব্যবহার করে চার্টের আকার পরিবর্তন করা যায় যখন ব্রাউজারের সাইজ পরিবর্তিত হয়।
Responsive Design এর মাধ্যমে Dynamic Adjustments
Highcharts এ responsive অপশন ব্যবহার করে আপনি চার্টের আকার এবং লেআউট স্বয়ংক্রিয়ভাবে অ্যাডজাস্ট করতে পারেন যখন ব্যবহারকারীর স্ক্রীন সাইজ পরিবর্তিত হয়।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Responsive Chart</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: 'Responsive Chart Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50, 60, 70]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500 // স্ক্রীন সাইজ 500px এর কম হলে
},
chartOptions: {
chart: {
height: 300 // চার্টের উচ্চতা কমানো
},
title: {
style: {
fontSize: '14px' // টাইটেলের ফন্ট সাইজ কমানো
}
}
}
}]
}
});
</script>
</body>
</html>
এখানে, responsive অপশন ব্যবহার করা হয়েছে, যেখানে maxWidth: 500 এর মাধ্যমে স্ক্রীন সাইজ 500px এর নিচে গেলে চার্টের height এবং title font size পরিবর্তন হবে। এইভাবে, চার্টের আকার এবং ডিজাইন স্বয়ংক্রিয়ভাবে স্ক্রীনের সাইজ অনুযায়ী পরিবর্তিত হবে।
Resize Event ব্যবহার করে Dynamic Adjustments
আপনি JavaScript এর মাধ্যমে চার্টের আকার পরিবর্তন করতে পারেন resize event ব্যবহার করে। যখন ব্রাউজারের আকার পরিবর্তিত হয়, তখন আপনি chart.setSize() মেথড ব্যবহার করে চার্টের আকার পরিবর্তন করতে পারেন।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Resize Event</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Resize Event Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50, 60, 70]
}]
});
window.addEventListener('resize', function () {
var newWidth = window.innerWidth;
if (newWidth < 500) {
chart.setSize(400, 300); // ছোট স্ক্রীনে চার্টের আকার ছোট করা
} else {
chart.setSize('100%', 400); // বড় স্ক্রীনে চার্টের আকার পুনরায় সেট করা
}
});
</script>
</body>
</html>
এখানে, resize event ব্যবহার করা হয়েছে যা ব্রাউজারের আকার পরিবর্তন হলে চার্টের আকার পরিবর্তন করে। যখন স্ক্রীনের আকার ছোট হবে, তখন setSize() মেথড ব্যবহার করে চার্টের আকার ছোট করা হবে।
Chart Layout এর Dynamic Adjustments
Highcharts এ আপনি chart layout এবং chart margins ডায়নামিকভাবে কাস্টমাইজ করতে পারেন। আপনি যদি নির্দিষ্ট স্ক্রীন সাইজ বা কন্ডিশনের ভিত্তিতে লেআউট পরিবর্তন করতে চান, তবে chart.margin এবং chart.spacing অপশন ব্যবহার করতে পারেন।
উদাহরণ:
Highcharts.chart('container', {
chart: {
type: 'bar',
margin: [50, 50, 50, 50] // চারটি দিকের মার্জিন নির্ধারণ
},
title: {
text: 'Chart Layout Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [5, 10, 15, 20, 25]
}],
responsive: {
rules: [{
condition: {
maxWidth: 600 // স্ক্রীন সাইজ 600px এর নিচে গেলে
},
chartOptions: {
chart: {
margin: [30, 30, 30, 30] // মার্জিন ছোট করা
}
}
}]
}
});
এখানে, margin এর মাধ্যমে চার্টের চারটি দিকের মার্জিন নির্ধারণ করা হয়েছে। এবং responsive অপশন ব্যবহার করে, যখন স্ক্রীন সাইজ 600px এর নিচে চলে যায়, তখন মার্জিন কমিয়ে দেওয়া হয়।
উপসংহার
Highcharts এ chart size এবং layout এর জন্য ডায়নামিক অ্যাডজাস্টমেন্ট করার মাধ্যমে আপনি চার্টটি মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য উপযুক্ত করে তুলতে পারেন। Responsive options এবং resize event ব্যবহার করে আপনি স্বয়ংক্রিয়ভাবে চার্টের আকার এবং ডিজাইন কাস্টমাইজ করতে পারেন। এইভাবে, Highcharts আপনাকে একটি responsive এবং user-friendly ডেটা ভিজুয়ালাইজেশন তৈরি করার সুযোগ দেয়, যা বিভিন্ন স্ক্রীন সাইজ এবং ডিভাইসে সঠিকভাবে কাজ করে।
Read more
