Highcharts লাইব্রেরি ডেটা ভিজুয়ালাইজেশনের জন্য অনেক শক্তিশালী টুল প্রদান করে, যার মধ্যে একটি গুরুত্বপূর্ণ ফিচার হল Exporting Options। এই ফিচারের মাধ্যমে আপনি আপনার চার্টকে বিভিন্ন ফরম্যাটে PNG, JPEG, PDF, এবং SVG আউটপুটে রপ্তানি করতে পারেন। এটি ব্যবহারকারীদের জন্য চার্টের ডেটা বিভিন্ন প্রয়োজন অনুযায়ী সেভ এবং শেয়ার করার সুবিধা দেয়।
Highcharts Exporting Options: কীভাবে কাজ করে?
Highcharts Exporting Module আপনাকে আপনার চার্টের একাধিক আউটপুট ফরম্যাটে export করার সুযোগ দেয়। আপনি Exporting module সক্রিয় করার মাধ্যমে এই ফিচারটি ব্যবহার করতে পারবেন। এটি চার্টের উপরের অংশে Exporting Button তৈরি করে, যা ব্যবহারকারীকে চার্টটি রপ্তানি করার জন্য বিভিন্ন ফরম্যাট নির্বাচন করতে দেয়।
Exporting Options কী কী ফরম্যাটে করতে পারেন?
- PNG - চিত্রের আউটপুট হিসেবে।
- JPEG - চিত্রের আউটপুট হিসেবে।
- PDF - চার্টটি পিডিএফ ফরম্যাটে সেভ করা।
- SVG - স্কেলেবল ভেক্টর গ্রাফিক্স (SVG) ফরম্যাটে।
Highcharts Exporting Options সক্রিয় করা
Highcharts এ Exporting Options ব্যবহারের জন্য exporting মডিউলটি Highcharts লাইব্রেরি অন্তর্ভুক্ত করতে হবে। নিচে একটি উদাহরণ দেখানো হল যেখানে চার্টে Exporting Options ব্যবহার করা হয়েছে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Exporting Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script> <!-- Exporting মডিউল অন্তর্ভুক্ত -->
<script src="https://code.highcharts.com/modules/export-data.js"></script> <!-- ডেটা রপ্তানি মডিউল -->
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'বিক্রয় প্রবণতা'
},
subtitle: {
text: 'Highcharts Exporting Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'বিক্রয় (Sales)'
}
},
series: [{
name: 'বিক্রি',
data: [10, 20, 30, 40, 50]
}],
exporting: {
enabled: true, // Exporting সক্ষম করা
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG']
}
}
}
});
</script>
</body>
</html>
এখানে, exporting অপশন ব্যবহার করে চার্টের context button তৈরি করা হয়েছে, যার মাধ্যমে ব্যবহারকারীরা বিভিন্ন ফরম্যাটে PNG, JPEG, PDF, এবং SVG আউটপুটে চার্ট রপ্তানি করতে পারবে।
Exporting Options কাস্টমাইজেশন
Highcharts এ Exporting Options কাস্টমাইজ করে আপনি Exporting Button এর স্টাইল, অবস্থান এবং কনটেক্সট মেনু আইটেমগুলো পরিবর্তন করতে পারেন। নিচে কিছু কাস্টমাইজেশন অপশন দেওয়া হলো।
১. Exporting Button Customization
আপনি contextButton কাস্টমাইজ করে রপ্তানি বাটনের মেনু আইটেমগুলোর ব্যবস্থা করতে পারেন।
উদাহরণ:
exporting: {
enabled: true,
buttons: {
contextButton: {
menuItems: [
'downloadPNG', // PNG ফরম্যাটে রপ্তানি
'downloadJPEG', // JPEG ফরম্যাটে রপ্তানি
'downloadPDF', // PDF ফরম্যাটে রপ্তানি
'downloadSVG', // SVG ফরম্যাটে রপ্তানি
'downloadXLS' // XLS ফরম্যাটে ডাউনলোড অপশন (যদি ডেটা রপ্তানি সক্রিয় থাকে)
]
}
}
}
এখানে, menuItems প্রপার্টি দিয়ে আপনি রপ্তানির জন্য যেসব ফরম্যাট চান তা নির্দিষ্ট করতে পারেন।
২. Button Placement Customization
আপনি exporting.buttonPosition ব্যবহার করে Exporting Button এর অবস্থান কাস্টমাইজ করতে পারেন।
উদাহরণ:
exporting: {
enabled: true,
buttons: {
contextButton: {
position: {
align: 'right', // বাটনকে ডানে সন্নিবেশিত করা
verticalAlign: 'top', // বাটনকে উপরে সন্নিবেশিত করা
x: -10, // ডানে একটু সরানো
y: 10 // উপরে একটু সরানো
}
}
}
}
এখানে, position প্রপার্টির মাধ্যমে Exporting Button এর অবস্থান কাস্টমাইজ করা হয়েছে।
Exporting Options এর অন্যান্য বৈশিষ্ট্য
১. Enable/Disable Buttons
আপনি menuItems এর মাধ্যমে নির্দিষ্ট বাটনগুলো সক্ষম বা নিষ্ক্রিয় করতে পারেন। উদাহরণস্বরূপ, আপনি যদি PNG বা JPEG রপ্তানি করতে না চান, তবে সেগুলো মেনু থেকে সরিয়ে দিতে পারেন।
exporting: {
enabled: true,
buttons: {
contextButton: {
menuItems: ['downloadSVG', 'downloadPDF'] // শুধুমাত্র SVG এবং PDF রপ্তানি সক্রিয়
}
}
}
২. Custom Exporting Functionality
Highcharts আপনাকে custom রপ্তানি ফাংশন তৈরি করার সুযোগ দেয়। এটি আপনাকে এক্সপোর্টিং প্রক্রিয়া কাস্টমাইজ করতে সহায়ক হতে পারে।
exporting: {
enabled: true,
buttons: {
contextButton: {
onclick: function () {
alert('কাস্টম রপ্তানি ফাংশন');
}
}
}
}
এখানে, onclick ইভেন্ট ব্যবহার করে একটি কাস্টম export ফাংশন যোগ করা হয়েছে।
উপসংহার
Highcharts এর Exporting Options ব্যবহার করে আপনি আপনার চার্টকে বিভিন্ন ফরম্যাটে রপ্তানি করতে পারেন, যেমন PNG, JPEG, PDF, এবং SVG। এই ফিচারটি ব্যবহারকারীদেরকে সহজেই চার্টের আউটপুট শেয়ার এবং সেভ করার সুবিধা প্রদান করে। আপনি Exporting Module সক্রিয় করে এই ফিচারটি ব্যবহার করতে পারেন এবং কাস্টমাইজেশন অপশন ব্যবহার করে রপ্তানি বাটনের স্টাইল, অবস্থান এবং মেনু আইটেমগুলি পরিবর্তন করতে পারেন। Highcharts এর এই ফিচারটি ডেটা ভিজুয়ালাইজেশনকে আরও কার্যকর এবং ব্যবহারকারীদের জন্য সহজ করে তোলে।
Read more
