ChartOptions এর ব্যবহার এবং কাস্টমাইজেশন

Google Charts API তে ChartOptions একটি অত্যন্ত গুরুত্বপূর্ণ অংশ যা চার্টের বিভিন্ন সেটিংস কাস্টমাইজ করতে ব্যবহৃত হয়। এই ChartOptions এর মাধ্যমে চার্টের টাইটেল, আকার, রঙ, লেজেন্ড, অক্ষর (axis) এবং অন্যান্য অনেক বৈশিষ্ট্য কাস্টমাইজ করা যায়।

ChartOptions এর প্রধান অপশনস

Google Charts API তে ব্যবহৃত কিছু গুরুত্বপূর্ণ ChartOptions এর মধ্যে উল্লেখযোগ্য:

1. title (চার্টের টাইটেল)

চার্টের উপরের অংশে প্রদর্শিত টাইটেল কাস্টমাইজ করা যায়।

chartOptions = {
  title: 'My Daily Activities',
};

2. width এবং height (চার্টের আকার)

চার্টের আকার কাস্টমাইজ করা যায়। ডিফল্ট আকার ব্যবহার করা হলেও এখানে নির্দিষ্ট আকার দেওয়া যেতে পারে।

chartOptions = {
  width: 600,
  height: 400
};

3. legend (লেজেন্ড কাস্টমাইজেশন)

চার্টের লেজেন্ডের পজিশন এবং অন্যান্য স্টাইল কাস্টমাইজ করা যেতে পারে। legend অপশনে আপনি লেজেন্ডের অবস্থান পরিবর্তন করতে পারেন।

chartOptions = {
  legend: { position: 'top' }
};

বিভিন্ন position ভ্যালু হতে পারে: 'top', 'bottom', 'left', 'right'।

4. colors (চার্টের রঙ)

চার্টের রঙ পরিবর্তন করতে colors অপশন ব্যবহার করা হয়। এখানে আপনি একটি অ্যারে ব্যবহার করে বিভিন্ন রঙের সেট দিতে পারেন।

chartOptions = {
  colors: ['#4285F4', '#EA4335', '#FBBC05', '#34A853']
};

5. is3D (3D চার্ট)

আপনি যদি 3D চার্ট তৈরি করতে চান, তাহলে is3D অপশন ব্যবহার করতে হবে। এটি সাধারণত PieChart, ColumnChart, BarChart ইত্যাদি চার্টে ব্যবহার করা হয়।

chartOptions = {
  is3D: true
};

6. pieHole (ডোঘনাট চার্ট)

Pie Chart এর জন্য Doughnut (ডোঘনাট) স্টাইল তৈরি করার জন্য pieHole ব্যবহার করা হয়।

chartOptions = {
  pieHole: 0.4 // 0.4 মানে গর্তের আকার হবে 40%
};

7. hAxis এবং vAxis (অক্ষ কাস্টমাইজেশন)

hAxis (horizontal axis) এবং vAxis (vertical axis) কাস্টমাইজ করার মাধ্যমে আপনি অক্ষের টাইটেল, লেবেল এবং অন্যান্য সেটিংস পরিবর্তন করতে পারেন।

chartOptions = {
  hAxis: {
    title: 'Time',
    minValue: 0
  },
  vAxis: {
    title: 'Sales'
  }
};

8. curveType (লাইন চার্টে ব্যবহার)

Line Chart এ লাইনটি সোজা না হয়ে কিউর্ভে থাকবে, এটা নির্ধারণ করতে curveType অপশন ব্যবহার করা হয়।

chartOptions = {
  curveType: 'function' // এটি লাইন চার্টে কিউর্ভ তৈরি করে
};

9. animation (এনিমেশন সেটিংস)

চার্টে এনিমেশন অ্যাড করতে animation অপশন ব্যবহার করা যায়। এটি চার্টের প্রদর্শনকে আরও আকর্ষণীয় করে তোলে।

chartOptions = {
  animation: {
    startup: true,
    easing: 'inAndOut',
    duration: 1000
  }
};

• startup: চার্ট লোড হওয়ার সময় এনিমেশন চালু হবে।
• easing: এনিমেশনের টাইপ (যেমন 'inAndOut', 'linear' ইত্যাদি)
• duration: এনিমেশনের সময় (মিলিসেকেন্ডে)

10. tooltip (টুলটিপ কাস্টমাইজেশন)

চার্টের পয়েন্টগুলোর উপর হোভার করলে টুলটিপ প্রদর্শিত হয়। tooltip অপশন দিয়ে আপনি টুলটিপের স্টাইল এবং কন্টেন্ট কাস্টমাইজ করতে পারেন।

chartOptions = {
  tooltip: { trigger: 'focus' }
};

এখানে, trigger অপশন দিয়ে আপনি নির্ধারণ করতে পারেন যে টুলটিপ কখন এবং কীভাবে প্রদর্শিত হবে। ('focus', 'selection' ইত্যাদি)

ChartOptions কাস্টমাইজেশনের উদাহরণ

এখন আমরা একটি সম্পূর্ণ উদাহরণ দেখি যেখানে আমরা বিভিন্ন ChartOptions ব্যবহার করেছি।

উদাহরণ (Pie Chart):

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Customized Google Pie Chart';

  chartType = 'PieChart'; // Chart Type
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Chart Data
  chartOptions = {
    title: 'My Daily Activities',  // Title
    pieHole: 0.4,  // Doughnut Style
    colors: ['#4285F4', '#EA4335', '#FBBC05', '#34A853'],  // Custom Colors
    legend: { position: 'top' },  // Legend Position
    is3D: true,  // 3D Effect
    animation: {  // Animation
      startup: true,
      easing: 'inAndOut',
      duration: 1000
    },
    tooltip: { trigger: 'focus' }  // Tooltip Behavior
  };
}

HTML (app.component.html):

<h1>{{ title }}</h1>

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

এখানে, আমরা একটি Pie Chart তৈরি করেছি যা 3D, Doughnut স্টাইল, কাস্টমাইজড রঙ এবং এনিমেশনসহ প্রদর্শিত হবে।

ChartOptions এর মাধ্যমে আরও কাস্টমাইজেশন

• FontSize: চার্টের টাইটেল এবং অন্যান্য টেক্সটের ফন্ট সাইজ কাস্টমাইজ করতে পারেন।
• Background Color: চার্টের ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করা সম্ভব।
• Axis Gridlines: অক্ষের গ্রিডলাইনগুলো কাস্টমাইজ করা যায়।

সারাংশ

ChartOptions ব্যবহার করে আপনি Google Charts এর বিভিন্ন সেটিংস এবং স্টাইল কাস্টমাইজ করতে পারেন। এটি চার্টের উপস্থাপনাকে আপনার প্রয়োজন অনুসারে সাজাতে সাহায্য করে। আপনি রঙ, আকার, টাইটেল, লেজেন্ড, এনিমেশন, এবং আরও অনেক কিছু কাস্টমাইজ করতে পারেন। এর মাধ্যমে আপনার ডেটা ভিজুয়ালাইজেশন আরও আকর্ষণীয় এবং কার্যকরী হয়ে ওঠে।