Export এবং Print এর জন্য Custom Configuration

Highcharts এর এক্সপোর্ট এবং প্রিন্টিং অপশন - জিডব্লিউটি হাই চার্ট (GWT High Charts) - Web Development

769

Highcharts এ Export এবং Print অপশনের জন্য কাস্টম কনফিগারেশন তৈরি করা অনেক সুবিধাজনক হতে পারে, বিশেষ করে যখন আপনি আপনার চার্টের এক্সপোর্ট ফিচারগুলিকে কাস্টমাইজ করতে চান বা ব্যবহারকারীদের জন্য বিশেষ এক্সপোর্ট প্যানেল তৈরি করতে চান। GWT-এ Highcharts এর Exporting এবং Print ফিচার কাস্টমাইজ করা যেতে পারে। এতে আপনি এক্সপোর্ট ফরম্যাট, বাটন অবস্থান, সাইজ এবং আরও অনেক কিছু নিয়ন্ত্রণ করতে পারবেন।

নিচে Highcharts Export এবং Print এর জন্য কাস্টম কনফিগারেশন দেওয়া হলো:


১. Custom Export Button Configuration

Highcharts এর Export বাটন কাস্টমাইজ করার জন্য আপনি কাস্টম বাটন তৈরি করতে পারেন, যেখানে এক্সপোর্ট অপশনগুলি প্রদর্শন করা হবে। উদাহরণস্বরূপ, আপনি বিশেষ ফরম্যাট যেমন PNG, PDF, SVG, অথবা প্রিন্টিং অপশনগুলো কাস্টমাইজ করে প্রদর্শন করতে পারেন।

উদাহরণ: কাস্টম Export Button কনফিগারেশন

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Sales Data'
    },
    series: [{
        name: 'Sales',
        data: [1, 3, 2, 4, 5]
    }],
    exporting: {
        enabled: true,  // এক্সপোর্টিং সক্রিয় করা
        buttons: {
            contextButton: {
                text: 'Custom Export',  // কাস্টম বাটনের টেক্সট
                menuItems: [
                    'downloadPNG',   // PNG ফরম্যাট
                    'downloadJPEG',  // JPEG ফরম্যাট
                    'downloadPDF',   // PDF ফরম্যাট
                    'downloadSVG',   // SVG ফরম্যাট
                    'printChart'     // প্রিন্ট অপশন
                ],
                align: 'right',  // বাটনের অবস্থান
                verticalAlign: 'top'
            }
        }
    }
});

ব্যাখ্যা:

  • text: 'Custom Export': কাস্টম এক্সপোর্ট বাটনের টেক্সট।
  • menuItems: এক্সপোর্ট করার জন্য যে ফরম্যাটগুলো প্রদান করা হবে, যেমন PNG, JPEG, PDF, SVG, এবং Print অপশন।
  • align এবং verticalAlign: এক্সপোর্ট বাটনের অবস্থান কাস্টমাইজ করা হয়েছে।

২. Custom Print Button

Highcharts এ একটি কাস্টম প্রিন্ট বাটন তৈরি করা সম্ভব। এটি আপনাকে ব্যবহারকারীদের জন্য এক্সপোর্ট ফিচারের পাশাপাশি প্রিন্ট করার সুবিধাও প্রদান করবে। কাস্টম প্রিন্ট বাটন ব্যবহার করে আপনি নিজের টেক্সট এবং স্টাইল দিয়ে প্রিন্ট অপশনটি কাস্টমাইজ করতে পারেন।

উদাহরণ: কাস্টম Print Button কনফিগারেশন

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Product Sales'
    },
    series: [{
        name: 'Product A',
        data: [10, 20, 30, 40, 50]
    }],
    exporting: {
        enabled: true,
        buttons: {
            printButton: {
                text: 'Print Chart',  // প্রিন্ট বাটনের টেক্সট
                onclick: function () {
                    this.print();  // প্রিন্ট ফাংশন কল
                },
                align: 'center',  // বাটনের অবস্থান
                verticalAlign: 'bottom'
            }
        }
    }
});

ব্যাখ্যা:

  • text: 'Print Chart': প্রিন্ট বাটনের টেক্সট।
  • onclick: function () { this.print(); }: প্রিন্ট বাটনে ক্লিক করলে প্রিন্ট ফাংশন কল হবে এবং চার্টটি প্রিন্ট হবে।
  • align এবং verticalAlign: প্রিন্ট বাটনের অবস্থান কাস্টমাইজ করা হয়েছে।

৩. Custom Export Size Configuration

Highcharts এ এক্সপোর্ট করার সময় আপনি চার্টের সাইজ কাস্টমাইজ করতে পারেন, যাতে এক্সপোর্ট করা ছবি বা PDF নির্দিষ্ট আকারে হয়। এটি গুরুত্বপূর্ণ যখন আপনি নিশ্চিত করতে চান যে চার্টটি বিশেষ প্রিন্ট বা ডাউনলোড সাইজে থাকবে।

উদাহরণ: কাস্টম এক্সপোর্ট সাইজ কনফিগারেশন

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Sales Over Time'
    },
    series: [{
        name: 'Sales',
        data: [1, 3, 2, 4, 5]
    }],
    exporting: {
        enabled: true,
        sourceWidth: 800,  // এক্সপোর্ট করা ছবির প্রস্থ
        sourceHeight: 600,  // এক্সপোর্ট করা ছবির উচ্চতা
        buttons: {
            contextButton: {
                menuItems: ['downloadPNG', 'downloadPDF']
            }
        }
    }
});

ব্যাখ্যা:

  • sourceWidth: এক্সপোর্ট করা ছবির প্রস্থ কাস্টমাইজ করা হয়েছে।
  • sourceHeight: এক্সপোর্ট করা ছবির উচ্চতা কাস্টমাইজ করা হয়েছে।

৪. কাস্টম এক্সপোর্ট ফর্ম্যাট এবং কাস্টম প্যানেল

Highcharts এ আপনি কাস্টম এক্সপোর্ট প্যানেল তৈরি করতে পারেন, যেখানে আপনি প্রয়োজনীয় এক্সপোর্ট ফরম্যাট এবং বাটন কাস্টমাইজ করতে পারেন। যেমন, আপনি নির্দিষ্ট ফরম্যাটে এক্সপোর্ট করার বিকল্প সরবরাহ করতে পারেন এবং এক্সপোর্ট প্যানেলটি সম্পূর্ণরূপে কাস্টমাইজ করতে পারেন।

উদাহরণ: কাস্টম এক্সপোর্ট প্যানেল

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Market Data'
    },
    series: [{
        name: 'Data Series',
        data: [10, 20, 30, 40, 50]
    }],
    exporting: {
        enabled: true,
        buttons: {
            contextButton: {
                text: 'Export Options',
                menuItems: [
                    'downloadPNG',  // PNG ফরম্যাট
                    'downloadJPEG', // JPEG ফরম্যাট
                    'downloadPDF',  // PDF ফরম্যাট
                    'downloadSVG'   // SVG ফরম্যাট
                ],
                align: 'left',  // এক্সপোর্ট বাটনের অবস্থান
                verticalAlign: 'top'
            }
        }
    }
});

ব্যাখ্যা:

  • menuItems: এখানে আপনি এক্সপোর্ট অপশন কাস্টমাইজ করতে পারেন, যেমন PNG, JPEG, PDF এবং SVG ফরম্যাটে এক্সপোর্ট করা।

সারাংশ

Highcharts এর Export এবং Print অপশনগুলির কাস্টম কনফিগারেশন আপনাকে সম্পূর্ণ কাস্টমাইজড এক্সপোর্ট এবং প্রিন্ট ফিচার তৈরি করার সুযোগ দেয়। আপনি এক্সপোর্ট ফরম্যাট, বাটন অবস্থান, প্রিন্ট অপশন, সাইজ কাস্টমাইজ করতে পারেন এবং একটি পুরোপুরি কাস্টম এক্সপোর্ট প্যানেল তৈরি করতে পারেন যা আপনার ব্যবহারকারীদের জন্য আরও সুবিধাজনক এবং কার্যকরী হবে। GWT এ Highcharts ইন্টিগ্রেশন ব্যবহার করে এই কাস্টম কনফিগারেশনগুলো খুব সহজে ইমপ্লিমেন্ট করা সম্ভব।


Content added By
Promotion

Are you sure to start over?

Loading...