Highcharts Heatmaps হলো একটি গ্রাফিক্যাল উপস্থাপনা যেখানে রঙের মাধ্যমে ডেটার তাপমাত্রা বা মান প্রদর্শিত হয়। এটি বিশেষত ডেটার ঘনত্ব বা পরিমাণ দেখানোর জন্য ব্যবহৃত হয়, যেমন: কর্মী উৎপাদনশীলতা, আবহাওয়া ডেটা, বা অন্য কোনো বিশ্লেষণাত্মক ডেটা যা সৃষ্টিকারী এবং প্রতিক্রিয়া উপর ভিত্তি করে।

Angular এবং Highcharts ব্যবহার করে Heatmap তৈরি করার প্রক্রিয়া নিচে দেওয়া হলো।

স্টেপ 1: Highcharts এবং Highcharts Heatmap ইনস্টল করা

প্রথমে, Highcharts এবং Highcharts Heatmap ইনস্টল করতে হবে। আপনি npm ব্যবহার করে এই দুটি ইনস্টল করতে পারেন।

npm install highcharts highcharts-heatmap --save

এটি Highcharts এবং Highcharts Heatmap প্লাগইন ইনস্টল করবে।

স্টেপ 2: Highcharts Heatmap মডিউল ব্যবহার করা

Highcharts Heatmap ব্যবহারের জন্য আপনাকে Highcharts এবং Highcharts Heatmap মডিউলকে অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে।

1. app.module.ts ফাইলে Highcharts এবং Highcharts Heatmap ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import * as Highcharts from 'highcharts';
import Heatmap from 'highcharts/modules/heatmap';

// Highcharts Heatmap মডিউল ইমপোর্ট করা
Heatmap(Highcharts);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এটি Highcharts Heatmap মডিউল আপনার অ্যাপে সক্রিয় করবে।

স্টেপ 3: Heatmap চার্ট কনফিগারেশন তৈরি করা

এখন, আমরা app.component.ts ফাইলে Heatmap চার্টের কনফিগারেশন তৈরি করব। Heatmap চার্টের ডেটা তিনটি মূল উপাদান দ্বারা নির্ধারিত হয়: x, y, এবং value (যা রঙের তাপমাত্রার মান নির্দেশ করে)।

app.component.ts ফাইলে নিম্নলিখিত কোড লিখুন:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import Heatmap from 'highcharts/modules/heatmap';

Heatmap(Highcharts);  // Heatmap মডিউল সক্রিয় করা

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;  // Highcharts ব্যবহার করার জন্য
  chartOptions: any;  // চার্টের অপশন স্টোর করার জন্য

  ngOnInit() {
    // Highcharts Heatmap কনফিগারেশন তৈরি করা
    this.chartOptions = {
      chart: {
        type: 'heatmap',  // Heatmap টাইপ নির্বাচন করা
        marginTop: 40,
        marginBottom: 40
      },
      title: {
        text: 'Highcharts Heatmap Example'
      },
      xAxis: {
        categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
      },
      yAxis: {
        categories: ['X', 'Y', 'Z', 'W', 'V'],
        title: null
      },
      colorAxis: {
        min: 0,
        max: 10,
        stops: [
          [0, '#ffffff'], // কম মানের জন্য সাদা রঙ
          [0.2, '#ff0000'], // মাঝারি মানের জন্য লাল রঙ
          [1, '#0000ff'] // উচ্চ মানের জন্য নীল রঙ
        ]
      },
      series: [{
        name: 'Heatmap Data',
        borderWidth: 1,
        data: [
          [0, 0, 5], [0, 1, 7], [0, 2, 9],
          [1, 0, 3], [1, 1, 6], [1, 2, 2],
          [2, 0, 8], [2, 1, 4], [2, 2, 3],
          [3, 0, 2], [3, 1, 9], [3, 2, 1],
          [4, 0, 4], [4, 1, 8], [4, 2, 5]
        ],
        tooltip: {
          pointFormat: 'x: {point.x}, y: {point.y}, value: {point.value}'
        }
      }]
    };
  }
}

এখানে আমরা Heatmap চার্টের জন্য ডেটা সেট করেছি যা x, y এবং value তিনটি উপাদান দিয়ে গঠিত। colorAxis এর মাধ্যমে আমরা তাপমাত্রার জন্য রঙ নির্ধারণ করেছি, যেখানে 0 থেকে 10 পর্যন্ত মানের জন্য বিভিন্ন রঙ ব্যবহার করা হয়েছে।

স্টেপ 4: Heatmap চার্ট প্রদর্শন করা

app.component.html ফাইলে Heatmap চার্ট প্রদর্শন করতে নিম্নলিখিত কোড লিখুন:

<div style="height: 400px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

এটি Heatmap চার্টের জন্য HighchartsChartModule কম্পোনেন্ট প্রদর্শন করবে।

ব্যাখ্যা:

1. chartOptions: এই অপশনে আমরা চার্টের কনফিগারেশন প্রদান করেছি। এতে Heatmap টাইপ, xAxis, yAxis, এবং colorAxis কনফিগারেশন অন্তর্ভুক্ত রয়েছে।
2. colorAxis: এই অংশে আমরা তাপমাত্রার মান অনুযায়ী রঙের স্টপ সেট করেছি। এখানে তিনটি স্টপ (সাদা, লাল, নীল) নির্ধারণ করা হয়েছে।
3. series.data: এখানে ডেটা উপস্থাপন করার জন্য x, y, এবং value এর মান দেওয়া হয়েছে। এই ডেটার মাধ্যমে চার্টে রঙের তাপমাত্রা পরিবর্তিত হবে।
4. tooltip: টুলটিপের মাধ্যমে ব্যবহারকারী যখন একটি পয়েন্টের উপর হোভার করবে, তখন পয়েন্টের x, y এবং value মান দেখানো হবে।

সারাংশ

Highcharts Heatmap তৈরি করতে Angular এবং Highcharts ব্যবহার করে সহজে ইন্টারঅ্যাকটিভ এবং ভিজ্যুয়াল ডেটা উপস্থাপন করা যায়। আপনি Heatmap এর মাধ্যমে বিভিন্ন ডেটার তাপমাত্রা বা ঘনত্ব রঙের মাধ্যমে প্রদর্শন করতে পারেন, যা বিশেষত বড় ডেটাসেট বা জটিল ডেটার বিশ্লেষণে সহায়ক। Highcharts এর Heatmap মডিউল ব্যবহার করে আপনি সহজেই একাধিক ভ্যালু এবং তাদের রঙের মানের উপর ভিত্তি করে তথ্য উপস্থাপন করতে পারবেন।