Highcharts লাইব্রেরি Exporting এবং Printing এর জন্য বেশ কিছু শক্তিশালী বৈশিষ্ট্য প্রদান করে, যার মাধ্যমে আপনি আপনার তৈরি করা চার্টগুলো সহজেই বিভিন্ন ফরম্যাটে এক্সপোর্ট বা প্রিন্ট করতে পারেন। এটি বিশেষভাবে রিপোর্ট তৈরি, ডেটা শেয়ারিং, বা প্রেজেন্টেশন তৈরির জন্য সহায়ক। Highcharts এ এক্সপোর্ট এবং প্রিন্ট ফিচারগুলি কাস্টমাইজ করা যায় এবং বিভিন্ন জনপ্রিয় ফরম্যাটে PNG, JPEG, PDF, SVG ইত্যাদিতে চার্ট রপ্তানি করা সম্ভব।
Highcharts এর Exporting ফিচার
Highcharts এ Exporting ফিচারটি Exporting module ব্যবহার করে সরাসরি চার্ট এক্সপোর্ট করা সম্ভব। এই মডিউলটি আপনাকে চার্টের বিভিন্ন ফরম্যাটে রপ্তানি করার সুবিধা দেয়। এটি বিশেষত ব্যবহৃত হয় যখন আপনি আপনার চার্টগুলো PNG, JPEG, PDF, বা SVG ফরম্যাটে সংরক্ষণ করতে চান।
Exporting Module ইনক্লুড করা
Highcharts এর Exporting ফিচার ব্যবহার করতে হলে, আপনাকে প্রথমে exporting.js মডিউলটি অন্তর্ভুক্ত করতে হবে। এটি আপনার HTML ফাইলের মধ্যে script ট্যাগ ব্যবহার করে যোগ করতে হবে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Export Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Sales Data'
},
exporting: {
enabled: true // এক্সপোর্ট বাটন সক্রিয় করা
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
</script>
</body>
</html>
এখানে, exporting.js মডিউল যোগ করার মাধ্যমে চার্টে এক্সপোর্ট বাটন সক্রিয় করা হয়েছে। এটি ব্যবহারকারীকে চার্টটিকে PNG, JPEG, PDF, SVG ফরম্যাটে এক্সপোর্ট করার সুবিধা প্রদান করবে।
Exporting এর কাস্টমাইজেশন
Highcharts এর exporting অপশন কাস্টমাইজ করা যেতে পারে। আপনি এক্সপোর্ট বাটন এর অবস্থান, রঙ, এবং ফরম্যাট কাস্টমাইজ করতে পারবেন।
কাস্টমাইজেশন উদাহরণ:
exporting: {
enabled: true, // এক্সপোর্ট বাটন সক্রিয় করা
buttons: {
contextButton: {
menuItems: ['printChart', 'downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG']
}
}
}
এখানে, menuItems ব্যবহার করে আপনি চার্টের এক্সপোর্ট মেনুতে কোন অপশনগুলো দেখাতে চান তা নির্ধারণ করতে পারেন। আপনি printChart, downloadPNG, downloadJPEG, downloadPDF, এবং downloadSVG এর মধ্যে নির্বাচন করতে পারবেন।
Highcharts এ Printing Chart
Highcharts এ Printing ফিচারটি ব্যবহার করে আপনি সহজেই আপনার চার্টটি প্রিন্ট করতে পারেন। Highcharts এর exporting মডিউলটি স্বয়ংক্রিয়ভাবে প্রিন্ট অপশন অন্তর্ভুক্ত করে, যা ব্যবহারকারীকে চার্টটি সরাসরি প্রিন্ট করার সুযোগ দেয়।
Printing ফিচার কাস্টমাইজেশন
প্রিন্টিং ফিচারটি exporting মডিউলের মাধ্যমে সক্রিয় করা হয়। আপনি এই মডিউল ব্যবহার করে প্রিন্ট স্কেল, ফরম্যাট বা বোর্ডার কাস্টমাইজ করতে পারেন।
উদাহরণ:
exporting: {
enabled: true, // এক্সপোর্ট বাটন সক্রিয় করা
buttons: {
contextButton: {
menuItems: ['printChart', 'downloadPNG', 'downloadPDF'] // প্রিন্ট অপশন যোগ করা
}
}
}
এই উদাহরণে, printChart অপশনটি এক্সপোর্ট মেনুতে অন্তর্ভুক্ত করা হয়েছে, যাতে ব্যবহারকারী সরাসরি প্রিন্ট করতে পারেন।
Highcharts এ Exporting এবং Printing এর অন্যান্য ফিচার
১. Chart Image Exporting
Highcharts এর মাধ্যমে আপনি PNG, JPEG, এবং SVG ফরম্যাটে চার্টের ছবি রপ্তানি করতে পারেন।
উদাহরণ:
exporting: {
enabled: true, // এক্সপোর্ট বাটন সক্রিয় করা
type: 'image/png', // ডিফল্ট ফরম্যাট (PNG)
filename: 'sales-chart' // ফাইলের নাম
}
এখানে, type প্রপার্টি ব্যবহার করে আপনি ডিফল্ট এক্সপোর্ট ফরম্যাট সেট করতে পারেন এবং filename দিয়ে ফাইলের নাম কাস্টমাইজ করতে পারেন।
২. Chart Data Exporting
আপনি চাইলে ডেটা এক্সপোর্ট করতে পারেন, যাতে চার্টের পিছনে থাকা ডেটাও এক্সপোর্ট হয়।
exporting: {
enabled: true,
buttons: {
contextButton: {
menuItems: ['downloadCSV', 'downloadXLS'] // ডেটা এক্সপোর্ট অপশন যোগ করা
}
}
}
এখানে, downloadCSV এবং downloadXLS মেনু অপশন ব্যবহারকারীদেরকে CSV অথবা Excel ফরম্যাটে ডেটা এক্সপোর্ট করতে সাহায্য করবে।
৩. PDF Exporting
Highcharts এ PDF ফরম্যাটে চার্ট এক্সপোর্ট করা সম্ভব, যা বিশেষ করে প্রেজেন্টেশন এবং রিপোর্ট তৈরির জন্য উপযুক্ত।
exporting: {
enabled: true, // এক্সপোর্ট বাটন সক্রিয় করা
type: 'application/pdf', // PDF ফরম্যাট
}
এই সেটআপের মাধ্যমে, ব্যবহারকারী চার্টকে PDF ফরম্যাটে এক্সপোর্ট করতে পারবেন।
উপসংহার
Highcharts এর Exporting এবং Printing ফিচারগুলি ব্যবহার করে আপনি আপনার চার্টগুলিকে বিভিন্ন ফরম্যাটে এক্সপোর্ট এবং প্রিন্ট করতে পারেন। এই ফিচারগুলির মাধ্যমে, আপনি ডেটা ভিজুয়ালাইজেশনকে আরও কার্যকরী ও প্রেজেন্টেশন বান্ধব করে তুলতে পারবেন। Highcharts এর এক্সপোর্ট ফিচারটি অত্যন্ত কাস্টমাইজযোগ্য, যার মাধ্যমে আপনি PNG, JPEG, PDF, SVG, এবং CSV/XLS ফরম্যাটে ডেটা এক্সপোর্ট করার সুবিধা পাবেন।
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 এর এই ফিচারটি ডেটা ভিজুয়ালাইজেশনকে আরও কার্যকর এবং ব্যবহারকারীদের জন্য সহজ করে তোলে।
Highcharts Export Module ব্যবহার করে আপনি আপনার তৈরি করা চার্টকে বিভিন্ন ফরম্যাটে এক্সপোর্ট করতে পারেন, যেমন PNG, JPEG, PDF, SVG ইত্যাদি। এটি ব্যবহারকারীদের জন্য একটি অত্যন্ত কার্যকরী ফিচার, যা তাদের ডেটা ভিজুয়ালাইজেশন সঠিক ফরম্যাটে সংরক্ষণ বা শেয়ার করতে সহায়ক।
Export Module ইনস্টলেশন
Highcharts এর Export Module কার্যকরীভাবে ব্যবহার করতে হলে, আপনাকে এটি অ্যাডিশনাল মডিউল হিসেবে অন্তর্ভুক্ত করতে হবে। Export Module Highcharts এর ডিফল্ট অংশ নয়, তাই এটি আলাদা করে লোড করতে হবে।
Export Module লোড করা
- প্রথমে আপনাকে Highcharts এর প্রধান লাইব্রেরি highcharts.js লোড করতে হবে।
- এরপর Export Module এর জন্য আলাদা exporting.js ফাইল লোড করতে হবে।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Export Module Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script> <!-- Export Module -->
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Sales Data'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}],
exporting: {
enabled: true // Exporting সক্রিয় করা
}
});
</script>
</body>
</html>
এখানে, exporting.js ফাইলটি লোড করা হয়েছে, এবং exporting: { enabled: true } দিয়ে Export ফিচারটি সক্রিয় করা হয়েছে। এর মাধ্যমে চার্টের উপর একটি Export বাটন প্রদর্শিত হবে, যা ব্যবহারকারীরা পছন্দমতো ফরম্যাটে চার্টটি এক্সপোর্ট করতে পারবেন।
Export Module এর ব্যবহার
Highcharts Export Module এর মাধ্যমে চার্ট এক্সপোর্ট করার জন্য, আপনি একাধিক ফরম্যাট এবং অপশন ব্যবহার করতে পারবেন। এই ফিচারটি আপনার চার্টের সাথে একটি Export button যোগ করে, যা ব্যবহারকারীকে PNG, JPEG, SVG, PDF ইত্যাদি ফরম্যাটে এক্সপোর্ট করার সুবিধা প্রদান করে।
Exporting অপশন কনফিগারেশন
Highcharts এর exporting অপশনটির মধ্যে আপনি কয়েকটি কাস্টমাইজেশন করতে পারেন, যেমন:
- enabled: এই অপশনটি true করলে Exporting বাটন সক্রিয় হবে।
- buttons: বিভিন্ন Export buttons কাস্টমাইজ করা যাবে, যেমন
contextButton(যে বাটনে Export অপশন থাকে)। - menuItems: Export অপশনের জন্য কাস্টমাইজ করা যায় কোন ফরম্যাটগুলো শো হবে (PNG, PDF, JPEG, SVG)।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Export Module with Customization</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Custom Export Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}],
exporting: {
enabled: true, // Exporting সক্রিয় করা
buttons: {
contextButton: {
text: 'Download', // Export button এর টেক্সট পরিবর্তন
menuItems: [
'downloadPNG',
'downloadJPEG',
'downloadPDF',
'downloadSVG',
'separator',
'printChart'
]
}
}
}
});
</script>
</body>
</html>
এখানে, contextButton এর মাধ্যমে এক্সপোর্ট বাটন কাস্টমাইজ করা হয়েছে, এবং menuItems এর মধ্যে একাধিক ফরম্যাট প্রদান করা হয়েছে: PNG, JPEG, PDF, SVG, এবং Print অপশন।
Highcharts Exporting Module এর সুবিধা
1. সহজ এক্সপোর্ট ফিচার
Highcharts Export Module খুব সহজে আপনার চার্টের জন্য এক্সপোর্ট বাটন যোগ করতে সাহায্য করে। এটি ব্যবহারকারীদের চার্টটি বিভিন্ন ফরম্যাটে এক্সপোর্ট করতে দেয়।
2. বিভিন্ন ফরম্যাটে এক্সপোর্ট
আপনি PNG, JPEG, SVG, PDF ফরম্যাটে চার্ট এক্সপোর্ট করতে পারেন, যা ব্যবহারকারীদের ডেটা সংরক্ষণ বা শেয়ার করার জন্য বিভিন্ন বিকল্প প্রদান করে।
3. প্রিন্ট এবং শেয়ারিং সুবিধা
Highcharts Exporting Module ব্যবহার করে আপনি চার্ট প্রিন্ট বা শেয়ার করাও সম্ভব, যেটি বিভিন্ন প্রেজেন্টেশন বা রিপোর্টের জন্য সহায়ক।
উপসংহার
Highcharts Export Module আপনার চার্টে Export বাটন যোগ করার মাধ্যমে চার্টের ডেটা বিভিন্ন ফরম্যাটে সংরক্ষণ বা শেয়ার করার সুযোগ দেয়। এটি অত্যন্ত সহজ এবং কার্যকরী, যেখানে আপনি PNG, JPEG, SVG, এবং PDF ফরম্যাটে এক্সপোর্ট করার সুযোগ পান। এই মডিউলটি খুব সহজেই আপনার Highcharts প্রকল্পে অন্তর্ভুক্ত করা যেতে পারে এবং ব্যবহারকারীদের জন্য একটি শক্তিশালী ডেটা শেয়ারিং টুল হিসেবে কাজ করে।
Highcharts এ Export Button এবং Menu Customization একটি অত্যন্ত শক্তিশালী ফিচার যা ব্যবহারকারীদের তাদের চার্টের বিভিন্ন ধরনের ফরম্যাটে এক্সপোর্ট করার সুবিধা প্রদান করে। আপনি চার্টের ডেটা PNG, JPEG, PDF, SVG, CSV, XLS, ইত্যাদি ফরম্যাটে এক্সপোর্ট করতে পারবেন এবং আপনি এই এক্সপোর্ট মেনু এবং বাটনের কাস্টমাইজেশনও করতে পারেন।
Export Button সেটআপ
Highcharts এ Export Button যোগ করতে হলে আপনাকে exporting অপশন ব্যবহার করতে হবে। এটি একটি ডিফল্ট বাটন তৈরি করে যা ব্যবহারকারীদের চার্ট এক্সপোর্ট করতে দেয়। নিচে একটি সাধারণ উদাহরণ দেওয়া হয়েছে, যেখানে এক্সপোর্ট বাটনটি আপনার চার্টে যুক্ত করা হয়েছে।
উদাহরণ: Basic Export Button
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Export Button Example'
},
exporting: {
enabled: true // এক্সপোর্ট বাটন সক্রিয় করা
},
series: [{
data: [1, 2, 3, 4, 5]
}]
});
এখানে, exporting.enabled অপশনটি true সেট করা হয়েছে, যার ফলে ডিফল্ট এক্সপোর্ট বাটন চার্টে প্রদর্শিত হবে। এই বাটনটি ব্যবহারকারীদেরকে বিভিন্ন ফরম্যাটে এক্সপোর্ট করার সুযোগ দেয়।
Export Menu Customization
আপনি Export Menu এর অপশন কাস্টমাইজ করতে পারেন যাতে এতে শুধুমাত্র আপনি প্রয়োজনীয় ফরম্যাটগুলোর অপশন থাকে অথবা আপনি মেনুর ডিজাইন পরিবর্তন করতে পারেন।
উদাহরণ: Export Menu কাস্টমাইজেশন
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Customized Export Menu Example'
},
exporting: {
enabled: true,
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadJPEG', 'downloadSVG'] // এক্সপোর্ট মেনু কাস্টমাইজ করা
}
}
},
series: [{
data: [1, 2, 3, 4, 5]
}]
});
এখানে, contextButton.menuItems এর মাধ্যমে আপনি এক্সপোর্ট মেনুতে কোন ফরম্যাট গুলি প্রদর্শিত হবে তা কাস্টমাইজ করতে পারেন। এই উদাহরণে PNG, JPEG, এবং SVG এর অপশনগুলি রাখা হয়েছে এবং অন্যসব অপশন বাদ দেওয়া হয়েছে।
Export Button এর Layout কাস্টমাইজেশন
Highcharts এ Export Button এর অবস্থান এবং ডিজাইন কাস্টমাইজ করা সম্ভব। আপনি বাটনের অবস্থান পরিবর্তন করতে পারেন এবং এর আকারও কাস্টমাইজ করতে পারেন।
উদাহরণ: Button Position এবং Style কাস্টমাইজেশন
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Export Button Custom Position Example'
},
exporting: {
enabled: true,
buttons: {
contextButton: {
align: 'left', // বাটনের অবস্থান বামদিকে
verticalAlign: 'top', // বাটনের অবস্থান উপরে
x: 10, // বাম থেকে 10px
y: 10, // উপরের দিক থেকে 10px
symbolSize: 30 // বাটনের আকার
}
}
},
series: [{
data: [1, 2, 3, 4, 5]
}]
});
এখানে:
- align এবং verticalAlign ব্যবহার করে বাটনের অবস্থান পরিবর্তন করা হয়েছে।
- x এবং y প্রপার্টি ব্যবহার করে বাটনের অবস্থান আরও সূক্ষ্মভাবে নিয়ন্ত্রণ করা হয়েছে।
- symbolSize দিয়ে বাটনের আকার কাস্টমাইজ করা হয়েছে।
Exporting Options কাস্টমাইজেশন
Highcharts এ Exporting Options কাস্টমাইজ করার মাধ্যমে আপনি এক্সপোর্ট অপশনগুলির আরও উন্নত কনফিগারেশন করতে পারেন, যেমন ফাইলের নাম, রেজোলিউশন, টেক্সট, ইত্যাদি।
উদাহরণ: File Name এবং Resolution কাস্টমাইজেশন
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Export File Name and Resolution Customization'
},
exporting: {
enabled: true,
filename: 'custom_chart_name', // এক্সপোর্ট ফাইলের নাম কাস্টমাইজ করা
scale: 2 // রেজোলিউশন বাড়ানো (ডিফল্ট 1)
},
series: [{
data: [1, 2, 3, 4, 5]
}]
});
এখানে:
- filename প্রপার্টি দিয়ে এক্সপোর্ট করা ফাইলের নাম কাস্টমাইজ করা হয়েছে।
- scale প্রপার্টি দিয়ে এক্সপোর্ট ফাইলের রেজোলিউশন বাড়ানো হয়েছে।
Export Button Event Handling
Highcharts এ আপনি Export Button এর সাথে ইভেন্ট হ্যান্ডলার যোগ করতে পারেন, যাতে আপনি এক্সপোর্ট বাটনের উপর কোনো নির্দিষ্ট কার্যকলাপ বাস্তবায়ন করতে পারেন, যেমন লগিং বা ডেটা পরিবর্তন করা।
উদাহরণ: Export Button Click Event
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Export Button Event Handling Example'
},
exporting: {
enabled: true,
events: {
afterExport: function() {
alert('Chart has been exported successfully!');
}
}
},
series: [{
data: [1, 2, 3, 4, 5]
}]
});
এখানে, afterExport ইভেন্ট ব্যবহার করা হয়েছে, যাতে চার্ট এক্সপোর্ট করার পর একটি অ্যালার্ট প্রদর্শিত হবে।
উপসংহার
Highcharts এর Export Button এবং Menu Customization ফিচার ব্যবহার করে আপনি আপনার চার্টের এক্সপোর্ট বাটন এবং মেনুর ডিজাইন এবং কার্যকারিতা কাস্টমাইজ করতে পারেন। আপনি ফাইলের নাম, ফরম্যাট, অবস্থান এবং রেজোলিউশনসহ নানা দিক কাস্টমাইজ করে একটি উপযুক্ত এক্সপোর্ট বাটন তৈরি করতে পারেন, যা আপনার ইউজারের জন্য সহজ এবং কার্যকর হবে।
Highcharts লাইব্রেরি ব্যবহারকারীদের চার্ট তৈরির জন্য শক্তিশালী এবং ইন্টারঅ্যাকটিভ টুল প্রদান করে। একেবারে বাস্তব সময়ে ডেটা ভিজুয়ালাইজেশন এবং ইনটераকটিভিটির সুবিধা ছাড়াও, Highcharts এর মাধ্যমে আপনি আপনার চার্ট প্রিন্ট বা PDF ফাইল হিসেবে এক্সপোর্ট করতে পারেন। এই ফিচারটি ব্যবহার করে আপনি আপনার চার্ট সহজেই ব্যবহারকারী বা ক্লায়েন্টদের কাছে প্রিন্ট আউট বা ডাউনলোডযোগ্য ফরম্যাটে পাঠাতে পারেন।
Highcharts Exporting Options
Highcharts এর exporting module এর মাধ্যমে আপনি চার্টকে বিভিন্ন ফরম্যাটে PNG, JPEG, PDF, এবং SVG আউটপুট করতে পারবেন। এটি একটি অত্যন্ত কার্যকরী ফিচার, যা আপনাকে আপনার ডেটা ভিজুয়ালাইজেশনকে প্রিন্ট বা শেয়ার করার জন্য আরও সহজ এবং দ্রুত করে তোলে।
Exporting Module সক্রিয় করা
প্রথমে, আপনাকে Highcharts Exporting Module অন্তর্ভুক্ত করতে হবে। আপনি এটি CDN বা লোকালি ইনস্টল করে ব্যবহার করতে পারেন।
উদাহরণ: Exporting Module CDN দ্বারা অন্তর্ভুক্ত করা
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
এখানে, exporting.js এবং offline-exporting.js ফাইল দুটি অন্তর্ভুক্ত করা হয়েছে, যা আপনাকে বিভিন্ন ফরম্যাটে চার্ট এক্সপোর্ট করার সুবিধা দেয়।
Highcharts এ Chart Printing
Chart Printing এর মাধ্যমে আপনি আপনার তৈরি করা চার্টের প্রিন্ট আউট নিতে পারেন। এটি একটি সহজ প্রক্রিয়া এবং এক্সপোর্টের মতোই কাজ করে। আপনি সাধারণত একটি "Print" বাটন যোগ করতে পারেন যা ব্যবহারকারীদের চার্ট প্রিন্ট করার সুবিধা প্রদান করবে।
উদাহরণ: Chart Printing যোগ করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Print Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Sales Data'
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}],
exporting: {
enabled: true, // Exporting অপশন চালু করা
buttons: {
printButton: { // প্রিন্ট বাটন কাস্টমাইজ করা
text: 'Print',
onclick: function () {
this.print(); // চার্টটি প্রিন্ট করতে বলা
}
}
}
}
});
</script>
</body>
</html>
এখানে, exporting.buttons.printButton এর মাধ্যমে একটি কাস্টম Print বাটন তৈরি করা হয়েছে, যা ব্যবহারকারীকে চার্টটি প্রিন্ট করার সুযোগ দেয়।
Highcharts এ PDF Export
Highcharts এ PDF Export ফিচারটি ব্যবহারের মাধ্যমে আপনি সহজেই চার্টকে PDF ফাইল আকারে এক্সপোর্ট করতে পারবেন। এই ফিচারটি ব্যবহারকারীকে তাদের প্রয়োজনীয় চার্ট বা ডেটার প্রিন্টযোগ্য ফাইল সরবরাহ করার জন্য একটি ভাল বিকল্প।
উদাহরণ: PDF Export যোগ করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts PDF Export Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Sales Trend'
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}],
exporting: {
enabled: true, // Exporting সক্রিয় করা
buttons: {
pdfButton: { // PDF Export বাটন কাস্টমাইজ করা
text: 'Export PDF',
onclick: function () {
this.exportChart({ type: 'application/pdf' }); // PDF এ এক্সপোর্ট করা
}
}
}
}
});
</script>
</body>
</html>
এখানে, exportChart() ফাংশন ব্যবহার করা হয়েছে PDF ফরম্যাটে চার্ট এক্সপোর্ট করার জন্য।
Highcharts এ Multiple Export Formats
Highcharts আপনাকে PNG, JPEG, SVG, PDF সহ বিভিন্ন ফরম্যাটে এক্সপোর্ট করার সুযোগ দেয়। আপনি এক্সপোর্টিং অপশনগুলি কাস্টমাইজ করতে পারেন এবং একাধিক ফরম্যাটে চার্ট এক্সপোর্ট করতে পারেন।
উদাহরণ: একাধিক ফরম্যাটে Export
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Export Multiple Formats</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Market Share'
},
series: [{
name: 'Share',
data: [
{ name: 'Product A', y: 40 },
{ name: 'Product B', y: 30 },
{ name: 'Product C', y: 30 }
]
}],
exporting: {
enabled: true, // Exporting চালু করা
buttons: {
contextButton: { // Export বাটন কাস্টমাইজ করা
menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG']
}
}
}
});
</script>
</body>
</html>
এখানে, menuItems ব্যবহার করে একাধিক Exporting Options যুক্ত করা হয়েছে, যাতে ব্যবহারকারীরা PNG, JPEG, PDF, এবং SVG ফরম্যাটে চার্ট এক্সপোর্ট করতে পারেন।
উপসংহার
Highcharts Exporting Options ব্যবহার করে আপনি আপনার চার্টকে PNG, JPEG, PDF, এবং SVG ফরম্যাটে এক্সপোর্ট করতে পারেন। এই ফিচারটি আপনার ডেটা ভিজুয়ালাইজেশনকে আরও ব্যবহারযোগ্য এবং শেয়ারযোগ্য করে তোলে। আপনি Chart Printing বা PDF Exporting ফিচার ব্যবহার করে সরাসরি চার্ট প্রিন্ট বা ডাউনলোডযোগ্য ফাইল তৈরি করতে পারেন, যা বিশেষভাবে রিপোর্ট এবং প্রেজেন্টেশন তৈরির জন্য উপকারী। Highcharts এর exporting module সহজেই কাস্টমাইজ করা যায় এবং এটি আপনার চার্টের শেয়ারিং এবং প্রিন্টিং প্রক্রিয়াকে আরও কার্যকরী এবং সুদৃঢ় করে তোলে।
Read more
