Custom Plugin তৈরি করা এবং যুক্ত করা

Chart.js একটি শক্তিশালী এবং নমনীয় প্লাগইন সিস্টেম প্রদান করে, যা আপনাকে চার্টের বিভিন্ন কার্যকলাপ কাস্টমাইজ করতে সাহায্য করে। আপনি Custom Plugin তৈরি করে Chart.js এর পূর্বনির্ধারিত কার্যকারিতা উন্নত বা সম্পূর্ণ নতুন বৈশিষ্ট্য যোগ করতে পারেন। Custom Plugin এর মাধ্যমে চার্টের রেন্ডারিং প্রক্রিয়া, ইন্টারঅ্যাকশন, টুলটিপ, অ্যানিমেশন, এবং অন্যান্য জিনিস কাস্টমাইজ করা যায়।

Custom Plugin তৈরি করার প্রক্রিয়া

Chart.js এ Custom Plugin তৈরি করতে আপনাকে একটি JavaScript অবজেক্ট তৈরি করতে হবে যা Chart.js এর প্লাগইন সিস্টেমে সংযুক্ত হবে। এই অবজেক্টে কিছু মৌলিক মেথড থাকবে, যেমন:

• id: প্লাগইনের একটি একক আইডি যা Chart.js সিস্টেমে চিহ্নিত হবে।
• beforeInit, afterInit, beforeDraw, afterDraw ইত্যাদি মেথড: এগুলি প্লাগইন চলাকালীন বিভিন্ন পর্যায়ে চার্টের আচরণ নিয়ন্ত্রণ করতে ব্যবহৃত হয়।

Custom Plugin উদাহরণ

এখানে একটি সাধারণ কাস্টম প্লাগইন উদাহরণ দেওয়া হলো, যা Chart.js এর চার্টের উপরে একটি কাস্টম টেক্সট প্রদর্শন করবে।

Step 1: Custom Plugin তৈরি

const customPlugin = {
    id: 'customTextPlugin', // Plugin ID
    beforeDraw: function(chart) {
        // Context এবং canvas এলিমেন্ট পান
        const ctx = chart.ctx;
        const width = chart.width;
        const height = chart.height;

        // কাস্টম টেক্সট সেট করা
        const text = 'Custom Text Here!';
        
        // টেক্সট কনফিগারেশন
        ctx.save();
        ctx.font = '30px Arial';
        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(text, width / 2, height / 2); // টেক্সট প্রদর্শন
        ctx.restore();
    }
};

এই প্লাগইনে beforeDraw মেথড ব্যবহার করা হয়েছে, যা চার্টটি আঁকার আগে কাস্টম টেক্সট প্রদর্শন করবে। এখানে ক্যানভাসের কেন্দ্রে একটি কাস্টম টেক্সট "Custom Text Here!" আঁকা হয়েছে।

Step 2: প্লাগইন Chart.js এ যুক্ত করা

Chart.js এ কাস্টম প্লাগইন যুক্ত করার জন্য আপনাকে Chart.js কনফিগারেশনে প্লাগইনটিকে plugins অ্যারে তে অন্তর্ভুক্ত করতে হবে।

// Chart.js কনফিগারেশন
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar', // Chart type
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
            label: 'Sales',
            data: [12, 19, 3, 5, 2],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: [customPlugin]  // Custom Plugin যুক্ত করা
    }
});

এখানে, plugins: [customPlugin] লাইনটি দিয়ে আপনি আপনার কাস্টম প্লাগইনটি চার্টে যুক্ত করেছেন। এই প্লাগইনটি চার্টটি রেন্ডার করার সময় ক্যানভাসে কাস্টম টেক্সট প্রদর্শন করবে।

Custom Plugin কাস্টমাইজেশন

Chart.js প্লাগইনগুলি আরও কাস্টমাইজ করার জন্য কিছু মেথড এবং অপশন ব্যবহার করা যায়। উদাহরণস্বরূপ:

1. beforeInit: চার্ট শুরু হওয়ার আগে কাস্টম কার্যকলাপ যুক্ত করা।
2. afterDraw: চার্ট আঁকার পর কাস্টম কার্যকলাপ যুক্ত করা।
3. afterUpdate: চার্ট আপডেট হওয়ার পর কার্যকলাপ।

অন্য একটি উদাহরণ (কাস্টম টুলটিপ)

const customTooltipPlugin = {
    id: 'customTooltip',
    afterEvent: function(chart, event) {
        if (event.type === 'mousemove') {
            const tooltip = chart.tooltip;
            tooltip.setActiveElements([{
                datasetIndex: 0,
                index: 0
            }], {x: event.x, y: event.y});
            chart.update();
        }
    }
};

এখানে, afterEvent মেথড ব্যবহার করা হয়েছে, যা মাউস মুভ করার সময় চার্টের প্রথম ডেটাসেটের প্রথম পয়েন্টকে সিলেক্ট করবে এবং কাস্টম টুলটিপ তৈরি করবে।

প্লাগইন অপশনগুলির মেথডস

Chart.js প্লাগইন সিস্টেমে কয়েকটি স্ট্যান্ডার্ড মেথড রয়েছে, যা প্লাগইনের কাজ করতে সাহায্য করে:

• beforeInit: চার্ট ইনিশিয়ালাইজ হওয়ার আগে।
• afterInit: চার্ট ইনিশিয়ালাইজ হওয়ার পরে।
• beforeDraw: চার্ট আঁকার আগে।
• afterDraw: চার্ট আঁকার পরে।
• beforeUpdate: চার্ট আপডেট হওয়ার আগে।
• afterUpdate: চার্ট আপডেট হওয়ার পরে।
• beforeDataLimits: ডেটা লিমিটের আগে।
• afterDataLimits: ডেটা লিমিটের পরে।

সারাংশ

Chart.js এ কাস্টম প্লাগইন তৈরি করা একটি অত্যন্ত শক্তিশালী ফিচার, যা আপনার চার্টের কার্যকারিতা এবং প্রদর্শন কাস্টমাইজ করতে সাহায্য করে। আপনি beforeDraw, afterDraw, beforeInit, afterInit এবং অন্যান্য মেথড ব্যবহার করে প্লাগইন কাস্টমাইজ করতে পারেন। এটি আপনাকে সম্পূর্ণ নতুন বৈশিষ্ট্য বা অতিরিক্ত ফিচার যোগ করার সুযোগ দেয়, যা স্ট্যান্ডার্ড Chart.js বৈশিষ্ট্যগুলি পূর্ণ করে।