Highcharts Boost Module একটি এক্সটেনশন যা বড় ডেটাসেট নিয়ে কাজ করার সময় পারফরম্যান্সের উন্নতি সাধন করে। যখন আপনি অনেক ডেটা পয়েন্ট নিয়ে কাজ করেন, তখন ডেটার রেন্ডারিং এবং প্রক্রিয়াকরণ স্লো হয়ে যেতে পারে। Highcharts Boost মডিউল ইনস্টল এবং ব্যবহার করে আপনি সহজেই এই সমস্যা সমাধান করতে পারেন এবং ডেটা রেন্ডারিং দ্রুত করতে পারেন।
এখানে, আমরা দেখব কিভাবে Highcharts Boost Module ব্যবহার করে Angular অ্যাপে বড় ডেটা ভিজ্যুয়ালাইজেশন করা যায়।
প্রথমে, আপনাকে Highcharts Boost Module এবং Highcharts লাইব্রেরি ইনস্টল করতে হবে। এটি Angular প্রজেক্টে ইনস্টল করার জন্য npm ব্যবহার করুন।
Highcharts ইনস্টল করুন:
npm install highcharts --save
Highcharts Boost মডিউল ইনস্টল করুন:
npm install highcharts-boost --save
এখন আপনি Boost Module এবং Highcharts মডিউল ইমপোর্ট করবেন এবং Boost ফিচারটি Angular প্রজেক্টে সক্রিয় করবেন।
app.component.ts ফাইলে Boost মডিউল ইমপোর্ট করুন:
import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import Boost from 'highcharts/modules/boost'; // Highcharts Boost মডিউল ইমপোর্ট করা
Boost(Highcharts); // Boost মডিউল সক্রিয় করা
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
Highcharts = Highcharts; // Highcharts ব্যবহার করার জন্য
chartOptions: any; // চার্টের অপশন স্টোর করার জন্য
ngOnInit() {
// বড় ডেটাসেটের জন্য Boost ব্যবহার করা
this.chartOptions = {
chart: {
type: 'line',
boostThreshold: 5000 // Boost থ্রেশহোল্ড সেট করা (যত বেশি ডেটা, তত দ্রুত রেন্ডার হবে)
},
title: {
text: 'বড় ডেটা ভিজ্যুয়ালাইজেশন (Highcharts Boost)'
},
xAxis: {
type: 'linear',
min: 0
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
name: 'Data Series',
data: this.generateLargeDataset(10000), // বড় ডেটাসেট তৈরি করা
turboThreshold: 0 // Boost ফিচার সক্রিয় করা
}]
};
}
// বড় ডেটাসেট তৈরি করার জন্য ফাংশন
generateLargeDataset(points: number) {
const data = [];
for (let i = 0; i < points; i++) {
data.push([i, Math.random() * 100]); // X, Y ভ্যালু তৈরি করা
}
return data;
}
}
এখন, app.component.html ফাইলে Highcharts কম্পোনেন্ট যুক্ত করুন:
<div style="height: 400px;">
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 100%; display: block;">
</highcharts-chart>
</div>
boostThreshold: 5000 মানে হল যে যখন ডেটা পয়েন্ট ৫,০০০ পেরিয়ে যাবে, Boost মডিউল ব্যবহার শুরু হবে।Highcharts Boost Module বড় ডেটাসেটের সাথে কাজ করার জন্য একটি অত্যন্ত কার্যকরী টুল। এটি ডেটা রেন্ডারিং দ্রুত করতে সহায়ক এবং Angular অ্যাপে Highcharts এর মাধ্যমে বড় ডেটা ভিজ্যুয়ালাইজেশন উপস্থাপন করতে ব্যবহার করা যায়। Boost মডিউল ব্যবহার করে, আপনি দ্রুত এবং দক্ষভাবে বিশাল পরিমাণ ডেটা প্রদর্শন করতে পারেন।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
