Highcharts এ কাস্টম রেন্ডারিং লজিক যুক্ত করা একটি শক্তিশালী বৈশিষ্ট্য, যা আপনাকে চার্টের উপাদানগুলোর রেন্ডারিং কাস্টমাইজ করতে সহায়তা করে। এর মাধ্যমে আপনি বিভিন্ন ডেটা পয়েন্ট, সিরিজ, বা লেবেলগুলি কাস্টম ভাবে রেন্ডার করতে পারেন। কাস্টম রেন্ডারিং লজিক ব্যবহার করে আপনি আপনার চার্টকে আরও দৃষ্টিনন্দন এবং ইন্টারঅ্যাকটিভ করতে পারবেন।

Highcharts এ কাস্টম রেন্ডারিং লজিক মূলত renderer ব্যবহার করে সম্পাদন করা হয়, যা SVG বা Canvas এর মাধ্যমে কাস্টম গ্রাফিক্স তৈরি করতে সাহায্য করে।

1. Highcharts এ কাস্টম ড্রয়িং (Custom Drawing) - renderer ব্যবহার করা

Highcharts এর renderer ব্যবহার করে আপনি নিজের কাস্টম গ্রাফিক্স বা চিত্র তৈরি করতে পারেন, যেমন লাইন, সার্কেল, রেকট্যাঙ্গল, টেক্সট ইত্যাদি।

উদাহরণ: কাস্টম সার্কেল এবং টেক্সট রেন্ডারিং

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'line',
      events: {
        load: function () {
          const chart = this;

          // Custom circle rendering using renderer
          chart.renderer.circle(100, 100, 50)  // x, y, radius
            .attr({
              fill: '#FF5733',
              stroke: '#C70039',
              'stroke-width': 4
            })
            .add();

          // Custom text rendering
          chart.renderer.text('Custom Text', 100, 100)
            .css({
              color: 'blue',
              fontSize: '20px'
            })
            .add();
        }
      }
    },
    title: {
      text: 'Custom Rendering Example'
    },
    series: [{
      name: 'Sales',
      data: [1, 3, 2, 4, 5, 6]
    }]
  };
}

এখানে, chart.renderer.circle() এবং chart.renderer.text() ব্যবহার করে আমরা একটি কাস্টম সার্কেল এবং টেক্সট রেন্ডার করেছি।

• circle() পদ্ধতিটি একটি সার্কেল রেন্ডার করে, যেখানে আপনি তার x, y পজিশন এবং radius নির্ধারণ করতে পারেন।
• text() পদ্ধতিটি চার্টে কাস্টম টেক্সট যোগ করতে ব্যবহৃত হয়, যেখানে টেক্সটের পজিশন এবং CSS স্টাইল কাস্টমাইজ করা যেতে পারে।

2. ডেটা পয়েন্ট বা সিরিজের কাস্টম রেন্ডারিং

আপনি যদি সিরিজের ডেটা পয়েন্টে কাস্টম রেন্ডারিং করতে চান, তবে Highcharts এর point এবং series ইভেন্টের মাধ্যমে কাস্টম রেন্ডারিং যুক্ত করতে পারেন। এর মাধ্যমে আপনি সিরিজের পয়েন্টের আকার, রঙ, বা পজিশন কাস্টমাইজ করতে পারবেন।

উদাহরণ: কাস্টম পয়েন্ট স্টাইলিং

Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  title: {
    text: 'Custom Point Rendering'
  },
  plotOptions: {
    scatter: {
      marker: {
        radius: 10, // Default size of markers
        symbol: 'circle' // Default shape
      },
      events: {
        mouseOver: function() {
          // Change point style on hover
          this.graphic.attr({
            fill: '#FF5733',  // On hover color change
            r: 15  // Increase the radius on hover
          });
        },
        mouseOut: function() {
          // Revert point style when mouse out
          this.graphic.attr({
            fill: '#00FF00',  // Revert to original color
            r: 10  // Revert to original size
          });
        }
      }
    }
  },
  series: [{
    name: 'Series 1',
    data: [[1, 2], [3, 4], [5, 6], [7, 8]]
  }]
});

এখানে, mouseOver এবং mouseOut ইভেন্ট ব্যবহার করে আমরা কাস্টম পয়েন্ট রেন্ডারিং করেছি। যখন মাউস পয়েন্টের উপর আসে, তখন তার রঙ এবং আকার পরিবর্তন হয়।

3. ডাইনামিক ডেটা রেন্ডারিং (Dynamic Data Rendering)

Highcharts এর renderer আপনাকে ডাইনামিকভাবে ডেটার উপস্থাপনাকে কাস্টমাইজ করার সুবিধা দেয়। আপনি ডেটা সিরিজের উপর ভিত্তি করে কাস্টম গ্রাফিক্স তৈরি করতে পারেন।

উদাহরণ: ডাইনামিক ডেটা রেন্ডারিং

Highcharts.chart('container', {
  chart: {
    type: 'line',
    events: {
      load: function () {
        const chart = this;
        const series = chart.series[0];
        
        series.points.forEach(function (point) {
          // Custom rendering for each point in the series
          chart.renderer.rect(point.plotX - 5, point.plotY - 5, 10, 10)
            .attr({
              fill: 'rgba(255, 99, 132, 0.6)',
              stroke: '#FF0000',
              'stroke-width': 2
            })
            .add();
        });
      }
    }
  },
  title: {
    text: 'Dynamic Data Rendering Example'
  },
  series: [{
    name: 'Sales',
    data: [1, 3, 2, 4, 5, 6]
  }]
});

এখানে, আমরা series.points এর প্রতিটি পয়েন্টে কাস্টম রেন্ডারিং যোগ করেছি, যেখানে প্রতিটি পয়েন্টের জন্য একটি কাস্টম রেকট্যাঙ্গেল রেন্ডার হয়েছে।

4. কাস্টম গ্রাফিক্স অ্যাড করা

আপনি renderer ব্যবহার করে কাস্টম গ্রাফিক্স বা চিত্র (যেমন, ছবি বা আকার) চার্টে যুক্ত করতে পারেন।

উদাহরণ: কাস্টম গ্রাফিক্স অ্যাড করা

Highcharts.chart('container', {
  chart: {
    type: 'line',
    events: {
      load: function () {
        const chart = this;
        
        // Adding a custom image to the chart
        chart.renderer.image('https://www.example.com/custom-image.png', 100, 100, 50, 50)
          .add();
      }
    }
  },
  title: {
    text: 'Custom Image Example'
  },
  series: [{
    name: 'Sales',
    data: [1, 3, 2, 4, 5, 6]
  }]
});

এখানে, আমরা renderer.image() ব্যবহার করে একটি কাস্টম ইমেজ চার্টে যোগ করেছি।

সারাংশ

Highcharts এ কাস্টম রেন্ডারিং লজিক যুক্ত করে আপনি চার্টের উপাদানগুলি কাস্টমাইজ এবং উন্নত করতে পারেন। renderer ব্যবহার করে আপনি কাস্টম গ্রাফিক্স, লাইন, টেক্সট, ছবি, পয়েন্ট স্টাইলিং ইত্যাদি কাস্টমাইজ করতে পারেন। এটি আপনাকে আরও ভিজ্যুয়ালি আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে সহায়তা করবে। Highcharts এর এই কাস্টমাইজেশন ক্ষমতা চার্টগুলোকে আরও ব্যক্তিগতকৃত এবং ব্যবহারকারীর জন্য উপযোগী করে তোলে।