Angular অ্যাপ্লিকেশনে Chart.js ইন্টিগ্রেশন

Chart.js একটি জনপ্রিয় লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহার করা হয়। Angular অ্যাপ্লিকেশনে Chart.js ইন্টিগ্রেট করা অত্যন্ত সহজ এবং কার্যকরী। Angular-এর সাথে Chart.js ইন্টিগ্রেট করার জন্য আমাদের কিছু স্টেপ অনুসরণ করতে হবে।

১. Angular প্রজেক্ট তৈরি করা

প্রথমে Angular অ্যাপ্লিকেশন তৈরি করুন। যদি আপনি ইতিমধ্যে Angular অ্যাপ্লিকেশন তৈরি করে থাকেন, তাহলে এই ধাপটি স্কিপ করতে পারেন।

ng new chartjs-angular-app
cd chartjs-angular-app

২. Chart.js এবং Chart.js Angular Wrapper ইন্সটল করা

Angular প্রজেক্টে Chart.js ইন্টিগ্রেট করতে আপনাকে প্রথমে Chart.js এবং ng2-charts (Angular-এর জন্য Chart.js-এর অফিসিয়াল wrapper) ইন্সটল করতে হবে।

npm install chart.js
npm install ng2-charts

• chart.js: ডেটা ভিজ্যুয়ালাইজেশনের জন্য মূল লাইব্রেরি।
• ng2-charts: Angular অ্যাপ্লিকেশনে Chart.js ব্যবহার করার জন্য Angular wrapper।

৩. NgChartsModule আমদানি করা

Angular অ্যাপ্লিকেশনটি চার্ট প্রদর্শন করতে NgChartsModule ব্যবহার করবে। এজন্য আপনাকে AppModule-এ এটি ইম্পোর্ট করতে হবে।

app.module.ts ফাইলে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

// NgChartsModule import করা
import { NgChartsModule } from 'ng2-charts';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgChartsModule  // NgChartsModule এখানে যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

৪. Component তৈরি করা

এখন আপনার Angular কম্পোনেন্টে Chart.js ব্যবহার করতে হবে। এর জন্য আপনাকে ChartData এবং ChartOptions কনফিগারেশন তৈরি করতে হবে।

app.component.ts ফাইলে:

import { Component } from '@angular/core';
import { ChartOptions, ChartData, ChartType } from 'chart.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Chart Type (Bar, Line, etc.)
  public chartType: ChartType = 'bar'; 

  // Chart Data
  public chartData: ChartData<'bar'> = {
    labels: ['Red', 'Blue', 'Yellow', 'Green'],
    datasets: [
      {
        data: [12, 19, 3, 5],
        label: 'Votes',
        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
      }
    ]
  };

  // Chart Options
  public chartOptions: ChartOptions = {
    responsive: true, 
    scales: {
      y: {
        beginAtZero: true // Y-axis start from zero
      }
    }
  };
}

• chartType: চার্টের ধরন নির্ধারণ করে (যেমন 'bar', 'line', ইত্যাদি)।
• chartData: এখানে X-অক্ষের লেবেল এবং ডেটা প্রদান করা হয়েছে।
• chartOptions: চার্টের কাস্টমাইজেশন, যেমন স্কেল এবং রেসপন্সিভ সেটিংস।

৫. Template তৈরি করা

এখন আপনাকে HTML টেমপ্লেট ফাইলে চার্টটি রেন্ডার করতে হবে।

app.component.html ফাইলে:

<div style="display: block;">
  <canvas baseChart
    [data]="chartData"
    [options]="chartOptions"
    [type]="chartType">
  </canvas>
</div>

এখানে baseChart ডিরেক্টিভটি ng2-charts থেকে আসে যা চার্ট রেন্ডার করার জন্য ব্যবহৃত হয়। data, options, এবং type এই তিনটি প্রপার্টি আপনার চার্টের কনফিগারেশন সেট করতে ব্যবহার করা হয়।

৬. অ্যাপ চালানো

এখন আপনি Angular অ্যাপ্লিকেশনটি চালাতে পারবেন এবং Chart.js চার্ট দেখতে পাবেন।

ng serve

এটি ব্রাউজারে http://localhost:4200 এ ওপেন করুন এবং চার্টটি দেখুন।

সারাংশ

Chart.js এর মাধ্যমে Angular অ্যাপ্লিকেশনে ডেটা ভিজ্যুয়ালাইজেশন যোগ করা অত্যন্ত সহজ। এখানে মূলত ng2-charts লাইব্রেরি ব্যবহার করা হয়েছে, যা Chart.js কে Angular এর জন্য সহজভাবে অ্যাডাপ্ট করে। আপনি বিভিন্ন ধরনের চার্ট (যেমন বার চার্ট, লাইন চার্ট, পাই চার্ট) তৈরি করতে পারেন এবং চার্টের ডেটা এবং কাস্টমাইজেশন অপশনস নিয়ন্ত্রণ করতে পারবেন।