Slices কাস্টমাইজ করা এবং Animation যুক্ত করা

Chart.js-এ slices কাস্টমাইজ করা এবং animation যোগ করা খুবই সহজ এবং আপনি বিভিন্ন ধরনের ডেটা ভিজ্যুয়ালাইজেশনকে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ করতে পারেন। এই অংশে আমরা দেখব কীভাবে পাই চার্ট (Pie Chart) বা ডোনাট চার্ট (Doughnut Chart) এর slices কাস্টমাইজ এবং animation যুক্ত করা যায়।

স্লাইস কাস্টমাইজ করা (Customizing Slices)

Chart.js-এ স্লাইস কাস্টমাইজ করতে, বিশেষ করে পাই বা ডোনাট চার্টে, আপনি segment বা arc কাস্টমাইজেশন করতে পারেন। স্লাইসের রঙ, সীমানা, আকার, ইত্যাদি পরিবর্তন করা যায়।

উদাহরণ: পাই চার্টে স্লাইস কাস্টমাইজ করা

HTML (canvas)

<canvas id="myPieChart" width="400" height="400"></canvas>

JavaScript (Chart.js কনফিগারেশন)

const ctx = document.getElementById('myPieChart').getContext('2d');
const myPieChart = new Chart(ctx, {
    type: 'pie', // পাই চার্ট
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green'], // স্লাইসের নাম
        datasets: [{
            data: [10, 20, 30, 40], // স্লাইসের মান
            backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'], // স্লাইসের রঙ
            borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)'], // স্লাইসের বর্ডার রঙ
            borderWidth: 1 // বর্ডারের প্রস্থ
        }]
    },
    options: {
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(tooltipItem) {
                        return tooltipItem.label + ': ' + tooltipItem.raw + '%'; // টুলটিপ কাস্টমাইজেশন
                    }
                }
            }
        }
    }
});

• backgroundColor: প্রতিটি স্লাইসের ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করা যায়।
• borderColor: স্লাইসের বর্ডার রঙ কাস্টমাইজ করা যায়।
• borderWidth: স্লাইসের বর্ডারের প্রস্থ কাস্টমাইজ করা যায়।

Animation যোগ করা (Adding Animation)

Chart.js চার্টে অ্যানিমেশন যোগ করা সহজ। আপনি বিভিন্ন ধরনের অ্যানিমেশন ফাংশন ব্যবহার করতে পারেন যেমন ডেটা লোড হওয়া, চার্টে স্লাইস প্রবেশ করা ইত্যাদি।

উদাহরণ: পাই চার্টে অ্যানিমেশন যোগ করা

HTML (canvas)

<canvas id="myAnimatedPieChart" width="400" height="400"></canvas>

JavaScript (Chart.js কনফিগারেশন)

const ctx = document.getElementById('myAnimatedPieChart').getContext('2d');
const myAnimatedPieChart = new Chart(ctx, {
    type: 'pie', // পাই চার্ট
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green'],
        datasets: [{
            data: [10, 20, 30, 40],
            backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
            borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)'],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        animation: {
            animateRotate: true, // স্লাইস রোটেট হবে
            animateScale: true, // স্লাইসের আকার পরিবর্তন হবে
            duration: 1500, // অ্যানিমেশনের সময়কাল (মিলিসেকেন্ড)
            easing: 'easeInOutBounce' // অ্যানিমেশনের ইজিং
        },
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(tooltipItem) {
                        return tooltipItem.label + ': ' + tooltipItem.raw + '%';
                    }
                }
            }
        }
    }
});

• animateRotate: স্লাইসের রোটেশন অ্যানিমেশন চালু বা বন্ধ করতে ব্যবহার হয়।
• animateScale: স্লাইসের আকার পরিবর্তন করার অ্যানিমেশন চালু বা বন্ধ করতে ব্যবহার হয়।
• duration: অ্যানিমেশনের সময়কাল (মিলিসেকেন্ডে) কাস্টমাইজ করা যায়।
• easing: অ্যানিমেশনের গতির টাইপ (যেমন easeInOutBounce, linear ইত্যাদি) কাস্টমাইজ করা যায়।

আরও কিছু কাস্টমাইজেশন এবং অ্যানিমেশন অপশন

• Legend কাস্টমাইজেশন: Chart.js-এ লেজেন্ড কাস্টমাইজ করা যায়। যেমন, লেজেন্ডের অবস্থান পরিবর্তন করা (উপর, নিচে, ডান বা বাম)।

  options: {
      plugins: {
          legend: {
              position: 'top', // লেজেন্ডের অবস্থান
              labels: {
                  font: {
                      size: 16 // ফন্ট সাইজ কাস্টমাইজ করা
                  }
              }
          }
      }
  }
  

• Tooltips কাস্টমাইজেশন: Tooltips কাস্টমাইজ করার মাধ্যমে, আপনি প্রদর্শিত টুলটিপের তথ্য পরিবর্তন করতে পারেন এবং এটিকে আরও ইন্টারেক্টিভ করতে পারেন।

  options: {
      plugins: {
          tooltip: {
              backgroundColor: 'rgba(0, 0, 0, 0.7)', // টুলটিপের ব্যাকগ্রাউন্ড রঙ
              titleColor: 'white', // টুলটিপের টাইটেল রঙ
              bodyColor: 'white', // টুলটিপের বডি রঙ
              displayColors: false // স্লাইসের রঙ দেখানো বন্ধ করা
          }
      }
  }
  

সারাংশ

Chart.js দিয়ে slices কাস্টমাইজ করা এবং animation যোগ করা বেশ সহজ। আপনি স্লাইসের রঙ, সীমানা, আকার ইত্যাদি কাস্টমাইজ করতে পারেন এবং এছাড়া অ্যানিমেশন দিয়ে চার্টকে আরও ইন্টারেক্টিভ ও আকর্ষণীয় করে তুলতে পারেন। এটি ডেটা ভিজ্যুয়ালাইজেশনকে আরও প্রভাবশালী এবং ব্যবহারকারী-বান্ধব করে তোলে।