Highcharts ব্যবহার করতে হলে প্রথমে এর বেসিক স্ট্রাকচার এবং সিনট্যাক্স সম্পর্কে জানাটা গুরুত্বপূর্ণ। Highcharts দিয়ে চার্ট তৈরি করতে হলে, আপনাকে কিছু মৌলিক উপাদান এবং তাদের কাঠামো অনুসরণ করতে হবে। নিচে Highcharts এর বেসিক স্ট্রাকচার এবং সিনট্যাক্স সম্পর্কে বিস্তারিত আলোচনা করা হল।
Highcharts এর Basic Structure
Highcharts দিয়ে একটি চার্ট তৈরি করার জন্য সাধারণত নিচের উপাদানগুলো প্রয়োজন হয়:
- HTML ডিভ (Div) এলিমেন্ট: এখানে চার্টটি রেন্ডার হবে।
- Highcharts লাইব্রেরি লোড করা: Highcharts লাইব্রেরি JavaScript ফাইল আকারে ইমপোর্ট করতে হবে।
- Highcharts.chart() ফাংশন: এই ফাংশনের মাধ্যমে চার্টের কনফিগারেশন সেটআপ করতে হয়।
- চার্ট কনফিগারেশন অবজেক্ট: এই অবজেক্টের মধ্যে বিভিন্ন ধরনের তথ্য যেমন চার্ট টাইপ, ডেটা, অক্ষর, সিরিজ ইত্যাদি দেওয়া হয়।
Highcharts এর Syntax
1. HTML অংশ
প্রথমে একটি HTML ডিভ তৈরি করতে হবে, যেখানে চার্টটি রেন্ডার হবে:
<div id="container" style="width: 100%; height: 400px;"></div>
এখানে container হলো ডিভের আইডি, যা পরে JavaScript কোডে রেফারেন্স হিসাবে ব্যবহার করা হবে।
2. JavaScript কোড
এখন JavaScript কোডে Highcharts লাইব্রেরি ব্যবহার করে চার্ট তৈরি করা হয়। এই কোডটি সাধারণত <script> ট্যাগের মধ্যে থাকবে।
<script src="https://code.highcharts.com/highcharts.js"></script>
এটি Highcharts লাইব্রেরির CDN লিঙ্ক। এর মাধ্যমে লাইব্রেরি আপনার পৃষ্ঠায় ইমপোর্ট হবে।
3. চার্ট কনফিগারেশন
Highcharts.chart() ফাংশন ব্যবহার করে চার্টের কনফিগারেশন সেট করতে হবে। একটি বেসিক লাইন চার্টের উদাহরণ নিচে দেওয়া হল:
<script>
Highcharts.chart('container', {
chart: {
type: 'line' // এখানে চার্টের টাইপ নির্ধারণ করা হয়েছে (line, bar, pie ইত্যাদি)
},
title: {
text: 'Highcharts Example' // চার্টের শিরোনাম
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] // X-অক্ষের জন্য ক্যাটেগরি
},
yAxis: {
title: {
text: 'Value' // Y-অক্ষের শিরোনাম
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50] // সিরিজের ডেটা
}]
});
</script>
এখানে:
chart: এখানে চার্টের ধরনের (type) তথ্য দেওয়া হয়েছে, যেমন লাইন চার্ট।title: চার্টের শিরোনাম।xAxis: X-অক্ষের জন্য ক্যাটেগরি বা টেক্সট।yAxis: Y-অক্ষের শিরোনাম।series: চার্টের ডেটা সিরিজ। এটি একটি অ্যারে যাতে ডেটা পয়েন্ট থাকে।
Highcharts এর মূল উপাদান
1. chart
এটি চার্টের প্রধান কনফিগারেশন অবজেক্ট। এখানে আপনি চার্টের ধরনের তথ্য যেমন line, bar, pie, ইত্যাদি নির্ধারণ করবেন।
2. title
চার্টের শিরোনাম সেট করার জন্য ব্যবহার করা হয়।
3. xAxis এবং yAxis
এগুলি অক্ষর সেটআপের জন্য ব্যবহৃত হয়। xAxis হলো অনুভূমিক অক্ষ এবং yAxis হলো উল্লম্ব অক্ষ।
4. series
এটি একটি অ্যারে যা ডেটা সিরিজ ধারণ করে। একাধিক সিরিজ থাকতে পারে এবং প্রতিটি সিরিজে ডেটা পয়েন্ট দেওয়া থাকে।
উপসংহার
Highcharts একটি শক্তিশালী এবং সহজে কাস্টমাইজযোগ্য লাইব্রেরি যা JavaScript ব্যবহার করে ডেটা ভিজুয়ালাইজেশন চার্ট তৈরি করতে সাহায্য করে। এর বেসিক স্ট্রাকচার এবং সিনট্যাক্স যথেষ্ট সরল, তাই এটি দ্রুত সেটআপ করা যায় এবং বিভিন্ন ধরনের চার্ট তৈরি করা সম্ভব।
Read more
