Highcharts এ আপনি খুব সহজেই একটি চার্ট প্রিন্ট করতে পারেন। Highcharts এর Exporting module এর মাধ্যমে আপনি চার্টকে বিভিন্ন ফরম্যাটে (যেমন PDF, PNG, JPEG) এক্সপোর্ট করার পাশাপাশি সরাসরি প্রিন্টও করতে পারবেন। এটি ব্যবহারকারীদের চার্টের ডেটা বা ভিজুয়াল আউটপুট প্রিন্ট করার সুযোগ দেয়, যা ওয়েব অ্যাপ্লিকেশনগুলোতে খুবই সহায়ক।
নিচে Highcharts-এ প্রিন্টিং অপশন ব্যবহারের পদ্ধতি দেওয়া হলো।
১. Highcharts Exporting Module ইনস্টল করা
প্রথমে, আপনাকে Highcharts এর Exporting module ব্যবহার করতে হবে। এটি Highcharts এর একটি এক্সটেনশন যা আপনাকে চার্ট এক্সপোর্ট এবং প্রিন্ট করার ক্ষমতা দেয়। আপনাকে এই মডিউলটি আপনার স্ক্রিপ্টে অন্তর্ভুক্ত করতে হবে।
Highcharts Exporting Module ইনস্টল:
<script src="https://code.highcharts.com/modules/exporting.js"></script>
এটি আপনার HTML ফাইলের <head> সেকশনে যুক্ত করতে হবে। এই মডিউলটি ইনক্লুড করার পর, আপনি চার্টে প্রিন্ট অপশন যুক্ত করতে পারবেন।
২. প্রিন্ট অপশন কনফিগারেশন
Highcharts এ আপনি সরাসরি চার্ট প্রিন্ট করতে পারেন। exporting অপশনে printChart পদ্ধতি ব্যবহার করা হয় যা আপনাকে চার্টটি প্রিন্ট করার সুবিধা দেয়।
প্রিন্ট অপশন কনফিগারেশন উদাহরণ:
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Sales Data'
},
series: [{
name: 'Sales',
data: [1, 2, 3, 4, 5]
}],
exporting: {
enabled: true, // এক্সপোর্টিং অপশন সক্রিয় করা
buttons: {
contextButton: {
menuItems: ['printChart', 'downloadPNG', 'downloadJPEG', 'downloadPDF'] // প্রিন্ট এবং এক্সপোর্ট অপশন
}
}
}
});
এখানে:
enabled: true: এক্সপোর্টিং অপশনটি সক্রিয় করা হয়েছে।contextButton.menuItems: এখানে বিভিন্ন এক্সপোর্ট অপশন যেমন prntChart, downloadPNG, downloadJPEG, downloadPDF যুক্ত করা হয়েছে। এই অপশনগুলো চার্টের উপরে একটি কনটেক্সট মেনু হিসেবে প্রদর্শিত হবে।
৩. প্রিন্ট ফিচার কাস্টমাইজেশন
আপনি যদি চার্টের প্রিন্টিং ফিচার কাস্টমাইজ করতে চান, তবে আপনি print মেথডের মাধ্যমে এই কাস্টমাইজেশনটি করতে পারবেন। আপনি ফাইলের স্টাইল, লেআউট, ইত্যাদি কাস্টমাইজ করতে পারেন।
প্রিন্ট ফিচার কাস্টমাইজেশন উদাহরণ:
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Sales Data'
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}],
exporting: {
enabled: true,
buttons: {
contextButton: {
menuItems: ['printChart', 'downloadPNG', 'downloadJPEG', 'downloadPDF']
}
},
printButton: {
title: 'Print chart', // প্রিন্ট বাটনের টাইটেল কাস্টমাইজ করা
width: 100,
height: 50,
style: {
background: '#4CAF50', // প্রিন্ট বাটনের ব্যাকগ্রাউন্ড রঙ
color: 'white', // প্রিন্ট বাটনের টেক্সট রঙ
borderRadius: '5px' // প্রিন্ট বাটনের কোণার রেডিয়াস
}
}
}
});
এখানে, printButton এর মাধ্যমে প্রিন্ট বাটনের কাস্টম স্টাইল এবং টাইটেল কাস্টমাইজ করা হয়েছে।
৪. GWT এ Highcharts প্রিন্ট অপশন ইন্টিগ্রেট করা
আপনি যদি GWT (Google Web Toolkit) ব্যবহার করে Highcharts এর প্রিন্ট অপশন ইন্টিগ্রেট করতে চান, তবে আপনাকে GWT কোডে Exporting মডিউল ইন্টিগ্রেট করতে হবে। নিচে একটি উদাহরণ দেয়া হলো যেখানে GWT ব্যবহার করে Highcharts এর প্রিন্ট ফিচার ইন্টিগ্রেট করা হয়েছে:
public native void createChartWithPrintOption(JavaScriptObject chartData) /*-{
$wnd.Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Sales Data'
},
series: [{
name: 'Sales',
data: chartData
}],
exporting: {
enabled: true,
buttons: {
contextButton: {
menuItems: ['printChart', 'downloadPNG', 'downloadJPEG', 'downloadPDF']
}
}
}
});
}-*/;
এখানে:
- GWT কোড ব্যবহার করে
Highcharts.chartমেথডের মাধ্যমে চার্ট তৈরি করা হয়েছে। exporting.enabledদিয়ে এক্সপোর্টিং অপশন সক্রিয় করা হয়েছে এবংcontextButton.menuItemsএর মাধ্যমে প্রিন্টিং অপশন এবং অন্যান্য এক্সপোর্ট ফরম্যাটগুলো নির্ধারণ করা হয়েছে।
সারাংশ
Highcharts-এ চার্ট প্রিন্ট করার অপশন খুবই সহজ এবং ব্যবহারকারী বান্ধব। Exporting module ব্যবহার করে আপনি চার্টটি PDF, PNG, JPEG ফরম্যাটে এক্সপোর্ট করার পাশাপাশি সরাসরি প্রিন্টও করতে পারেন। GWT ব্যবহার করে আপনি Highcharts এর প্রিন্ট অপশনসহ অন্যান্য এক্সপোর্ট অপশনগুলো সহজেই ইন্টিগ্রেট করতে পারবেন এবং আপনার ওয়েব অ্যাপ্লিকেশনে উন্নত ফিচার যোগ করতে পারবেন।
Read more
