Responsive Design হল এমন একটি ডিজাইন কৌশল যা ওয়েবপেজ বা অ্যাপ্লিকেশনকে বিভিন্ন স্ক্রিন সাইজে উপযুক্তভাবে প্রদর্শিত হওয়ার সুযোগ দেয়। Highcharts এ Responsive Design এর মাধ্যমে আপনি নিশ্চিত করতে পারেন যে আপনার চার্টগুলো ডিভাইসের আকার অনুযায়ী সঠিকভাবে রেন্ডার হয়। Media Queries ব্যবহার করে আপনি নির্দিষ্ট স্ক্রিন সাইজে চার্টের আকৃতি, রঙ, বা অন্যান্য স্টাইল পরিবর্তন করতে পারেন।
Highcharts এ Responsive Design সেট করা
Highcharts তে responsive কনফিগারেশন সহজে যোগ করা যায়। এটি আপনাকে চার্টের আকার এবং অন্যান্য উপাদানগুলিকে রিসাইজ করতে সাহায্য করে, যেমন X ও Y অক্ষের লেবেল, সিরিজের সাইজ, গ্রিডলাইন ইত্যাদি।
Responsive Design কনফিগারেশন
Highcharts এ responsive সাপোর্ট করার জন্য আপনাকে chart.width এবং chart.height এর জন্য মিডিয়া কুয়েরি বা কন্ডিশন সেট করতে হবে।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Responsive Design</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',
width: null, // স্ক্রিন সাইজ অনুযায়ী রেসপন্সিভ চার্ট
height: 400,
reflow: true // রেসপন্সিভ প্রোপার্টি সক্রিয়
},
title: {
text: 'Responsive Design Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}],
responsive: {
rules: [{
condition: {
maxWidth: 600 // 600px এর কম স্ক্রিন সাইজের জন্য কন্ডিশন
},
chartOptions: {
title: {
text: 'Small Screen Title' // ছোট স্ক্রীনের জন্য টাইটেল পরিবর্তন
},
yAxis: {
title: {
text: 'Revenue'
}
}
}
}]
}
});
</script>
</body>
</html>
এখানে:
- chart.width ও chart.height এ
nullব্যবহার করা হয়েছে, যাতে চার্টের আকার স্বয়ংক্রিয়ভাবে স্ক্রিন সাইজ অনুসারে রিসাইজ হয়। reflow: trueদিয়ে রেসপন্সিভ আচরণ সক্ষম করা হয়েছে, যা স্ক্রিন সাইজ পরিবর্তন হলে চার্টের আকার স্বয়ংক্রিয়ভাবে পরিবর্তন করবে।- responsive.rules এর মাধ্যমে বিভিন্ন স্ক্রিন সাইজে কাস্টমাইজেশন করা হয়েছে, যেমন maxWidth: 600px এর জন্য চার্টের টাইটেল এবং Y-Axis এর টেক্সট পরিবর্তন।
Media Queries ব্যবহার করে Highcharts কাস্টমাইজেশন
Highcharts এর সাথে Media Queries ব্যবহার করে আপনি CSS এর মাধ্যমে চার্টের নির্দিষ্ট অংশ কাস্টমাইজ করতে পারেন, যেমন চার্টের আকার, মার্জিন, প্যাডিং ইত্যাদি, বিভিন্ন স্ক্রিন সাইজে।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Media Queries Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<style>
/* Media Query - Large Screen */
@media (min-width: 768px) {
#container {
height: 500px;
}
}
/* Media Query - Small Screen */
@media (max-width: 767px) {
#container {
height: 300px;
}
}
</style>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Responsive Chart with Media Queries'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
</script>
</body>
</html>
এখানে:
- Media Queries ব্যবহার করে আমরা large screens (768px এবং তার বেশি) এবং small screens (767px এর কম) এর জন্য আলাদা height কনফিগার করেছি।
- বড় স্ক্রিনে চার্টের height 500px এবং ছোট স্ক্রিনে 300px করা হয়েছে।
উপসংহার
Responsive Design এবং Media Queries ব্যবহার করে আপনি Highcharts এ আপনার চার্টগুলিকে বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে প্রদর্শন করতে পারেন। Highcharts এর responsive কনফিগারেশন এবং CSS Media Queries ব্যবহার করে, আপনি চার্টের আকার, টাইটেল, লেবেল ইত্যাদি কাস্টমাইজ করতে পারবেন, যা আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরও ব্যবহারকারী-বান্ধব এবং দ্রুত প্রতিক্রিয়া প্রদানকারী করবে।
Read more
