Highcharts এ Chart Options এবং Configuration Object হল চার্ট তৈরির জন্য ব্যবহৃত সমস্ত কনফিগারেশন সেটিংস এবং প্রপার্টি। এগুলি আপনার চার্টের ডিজাইন, ডেটা, অক্ষ, সিরিজ এবং আরও অনেক কিছু কাস্টমাইজ করার জন্য ব্যবহৃত হয়।
Chart Options (চার্ট অপশনস)
Highcharts এ, Chart Options বিভিন্ন বৈশিষ্ট্য এবং সেটিংসের মাধ্যমে চার্ট কাস্টমাইজ করতে সাহায্য করে। এগুলি একটি Configuration Object এর মধ্যে নির্দিষ্ট করা হয়। এই কনফিগারেশন অবজেক্টের মধ্যে আপনি Chart Type, Title, Axes, Series, Tooltips, Colors ইত্যাদি সেট করতে পারেন।
Configuration Object (কনফিগারেশন অবজেক্ট)
Highcharts এ চার্ট তৈরি করার জন্য যে কনফিগারেশন অবজেক্ট ব্যবহার করা হয়, তা মূলত একটি জাভাস্ক্রিপ্ট অবজেক্ট যা বিভিন্ন প্রপার্টি ধারণ করে। এই অবজেক্টের মধ্যে কিছু সাধারণ প্রপার্টি রয়েছে, যেগুলি চার্টের ভিজ্যুয়াল এবং কার্যকারিতা নির্ধারণ করে।
সাধারণ কনফিগারেশন অবজেক্টের গঠন
Highcharts.chart('container', {
chart: {
type: 'line' // চার্টের টাইপ (line, bar, pie, column ইত্যাদি)
},
title: {
text: 'Highcharts Example' // চার্টের শিরোনাম
},
subtitle: {
text: 'ডেটা ভিজুয়ালাইজেশন উদাহরণ' // সাব-শিরোনাম
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] // X-অক্ষের ক্যাটাগরি
},
yAxis: {
title: {
text: 'Value' // Y-অক্ষের শিরোনাম
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50] // সিরিজের ডেটা পয়েন্ট
}]
});
এই কনফিগারেশন অবজেক্টে প্রধান প্রধান উপাদানগুলি হল:
প্রধান চার্ট কনফিগারেশন অপশনস
1. chart
chart অপশন দিয়ে আপনি চার্টের সাধারণ কনফিগারেশন সেট করেন, যেমন চার্টের টাইপ। এটি নির্ধারণ করে যে আপনি কোন ধরনের চার্ট তৈরি করতে চান, যেমন লাইন, কলাম, বার, পাই ইত্যাদি।
উদাহরণ:
chart: {
type: 'bar' // এখানে বার চার্ট তৈরি হবে
}
2. title
title অপশনটি চার্টের প্রধান শিরোনাম নির্ধারণ করে।
title: {
text: 'বিক্রয় রিপোর্ট' // চার্টের শিরোনাম
}
3. subtitle
subtitle অপশনটি চার্টের সাব-শিরোনাম প্রদর্শন করে। এটি অপ্রত্যাশিত ডেটার বিস্তারিত বা অন্যান্য তথ্য প্রদর্শন করতে ব্যবহৃত হতে পারে।
subtitle: {
text: '২০২৪ সালের ডেটা'
}
4. xAxis এবং yAxis
এগুলি হল চার্টের অনুভূমিক (X) এবং উল্লম্ব (Y) অক্ষ। এখানে আপনি অক্ষের শিরোনাম, লেবেল এবং ক্যাটাগরি সেট করতে পারেন।
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr'] // X-অক্ষের ক্যাটাগরি
},
yAxis: {
title: {
text: 'মোট বিক্রয়'
}
}
5. series
series অপশনটি চার্টের ডেটা প্রদর্শন করে। এক বা একাধিক সিরিজ থাকতে পারে, এবং প্রতিটি সিরিজের জন্য আলাদা ডেটা পয়েন্ট থাকতে পারে।
series: [{
name: 'বিক্রয়',
data: [10, 20, 30, 40]
}]
এখানে, name হল সিরিজের নাম এবং data হল সেই সিরিজের ডেটা পয়েন্ট।
6. tooltip
tooltip অপশনটি চার্টের উপর মাউস পয়েন্টার রাখলে তথ্য প্রদর্শন করে। আপনি টুলটিপ কাস্টমাইজ করতে পারেন, যেমন স্টাইল বা ডেটা পয়েন্টের প্রদর্শন।
tooltip: {
pointFormat: '<b>{point.y}</b> বিক্রয়'
}
এখানে, {point.y} ডেটার Y-ভ্যালু দেখাবে যখন মাউস পয়েন্টার কোন ডেটা পয়েন্টের উপরে থাকবে।
7. plotOptions
plotOptions অপশনটি বিশেষভাবে সিরিজ কনফিগারেশনের জন্য ব্যবহৃত হয়, যা সিরিজের প্রদর্শন কাস্টমাইজ করতে সাহায্য করে।
plotOptions: {
series: {
pointStart: 2010 // সিরিজের জন্য শুরু বছরের নির্ধারণ
}
}
উপসংহার
Highcharts এ Chart Options এবং Configuration Object চার্টের ডিজাইন এবং কার্যকারিতা কাস্টমাইজ করার জন্য একটি শক্তিশালী টুল। আপনি চার্টের টাইপ, শিরোনাম, অক্ষ, সিরিজ, টুলটিপ ইত্যাদি কাস্টমাইজ করতে এই কনফিগারেশন অবজেক্ট ব্যবহার করবেন। এগুলি সঠিকভাবে সেট করলে, আপনি খুব সহজে সুন্দর এবং কার্যকরী ডেটা ভিজুয়ালাইজেশন তৈরি করতে পারবেন।
Read more
