Highcharts এ Axes Configuration অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি চার্টের X-Axis এবং Y-Axis এর সেটিংস নির্ধারণ করে। X-Axis এবং Y-Axis এর সঠিক কনফিগারেশন দ্বারা আপনি আপনার ডেটাকে আরও স্পষ্টভাবে উপস্থাপন করতে পারেন। এখানে, X এবং Y অক্ষের কাস্টমাইজেশন সম্পর্কে বিস্তারিত আলোচনা করা হল।
X-Axis কনফিগারেশন
X-Axis হল অনুভূমিক অক্ষ যা সাধারণত ক্যাটাগরি, টাইম সিরিজ বা পরিমাণ উপস্থাপন করে। Highcharts এ X-Axis কনফিগারেশন দিয়ে আপনি ক্যাটাগরি লেবেল, টাইম-সিরিজ ডেটা, রেঞ্জ, এবং গ্রিড লাইন কাস্টমাইজ করতে পারেন।
X-Axis এর কনফিগারেশন উদাহরণ
xAxis: {
categories: ['January', 'February', 'March', 'April'], // X-Axis এর ক্যাটাগরি
title: {
text: 'মাস' // X-Axis এর শিরোনাম
},
labels: {
style: {
fontSize: '14px', // X-Axis লেবেল স্টাইল
color: '#333' // লেবেল রঙ
}
},
tickInterval: 1, // টিকের ইন্টারভ্যাল
gridLineWidth: 1, // গ্রিড লাইনের প্রস্থ
gridLineColor: '#eee' // গ্রিড লাইনের রঙ
}
এখানে:
- categories: X-Axis এর জন্য নির্দিষ্ট ক্যাটাগরি প্রদান করা হয়েছে।
- title: X-Axis এর শিরোনাম সেট করা হয়েছে।
- labels: X-Axis এর লেবেলের স্টাইল কাস্টমাইজ করা হয়েছে, যেমন ফন্ট সাইজ এবং রঙ।
- tickInterval: X-Axis এ টিকের ইন্টারভ্যাল নির্ধারণ করা হয়েছে।
- gridLineWidth: X-Axis এর গ্রিড লাইনের প্রস্থ কাস্টমাইজ করা হয়েছে।
টাইম সিরিজের জন্য X-Axis কনফিগারেশন
টাইম সিরিজ ডেটার জন্য X-Axis কনফিগারেশন কিছুটা আলাদা হতে পারে, যেখানে time ডেটার মান নির্ধারণ করতে হয়।
xAxis: {
type: 'datetime', // টাইম সিরিজ ডেটা
title: {
text: 'তারিখ'
}
}
এখানে, টাইম সিরিজের জন্য type: 'datetime' ব্যবহার করা হয়েছে, যাতে ডেট টাইপের ডেটা সঠিকভাবে প্রদর্শিত হয়।
Y-Axis কনফিগারেশন
Y-Axis হল উল্লম্ব অক্ষ যা সাধারণত পরিমাণ, মুল্য অথবা ভ্যালু প্রদর্শন করে। Highcharts এ Y-Axis কনফিগারেশন দিয়ে আপনি মান, স্কেল, লেবেল, রেঞ্জ এবং অন্যান্য অপশন কাস্টমাইজ করতে পারেন।
Y-Axis এর কনফিগারেশন উদাহরণ
yAxis: {
title: {
text: 'বিক্রয় (টাকার পরিমাণ)' // Y-Axis এর শিরোনাম
},
labels: {
format: '{value}৳', // Y-Axis এর লেবেল ফরম্যাট
style: {
color: '#333', // লেবেলের রঙ
fontSize: '14px'
}
},
min: 0, // Y-Axis এর মিনিমাম মান
max: 1000, // Y-Axis এর ম্যাক্সিমাম মান
tickInterval: 200, // টিকের ইন্টারভ্যাল
gridLineWidth: 1, // গ্রিড লাইনের প্রস্থ
gridLineColor: '#ddd' // গ্রিড লাইনের রঙ
}
এখানে:
- title: Y-Axis এর শিরোনাম প্রদান করা হয়েছে।
- labels: Y-Axis এর লেবেল ফরম্যাট এবং স্টাইল কাস্টমাইজ করা হয়েছে। এখানে
{value}৳ব্যবহার করে রুপির মান দেখানো হচ্ছে। - min এবং max: Y-Axis এর মিনিমাম এবং ম্যাক্সিমাম মান নির্ধারণ করা হয়েছে, যা চার্টের রেঞ্জ সীমাবদ্ধ করবে।
- tickInterval: Y-Axis এ টিকের ইন্টারভ্যাল নির্ধারণ করা হয়েছে।
- gridLineWidth: Y-Axis এর গ্রিড লাইনের প্রস্থ কাস্টমাইজ করা হয়েছে।
X-Axis এবং Y-Axis এর অন্যান্য কনফিগারেশন
1. Logarithmic Scale (লগারিদমিক স্কেল)
আপনি যদি আপনার Y-Axis বা X-Axis এর স্কেল logarithmic করতে চান, তাহলে নিচের কোড ব্যবহার করতে পারেন।
yAxis: {
type: 'logarithmic', // Y-Axis এর স্কেল লগারিদমিক হবে
}
2. Reversed Axis (রিভার্সড অক্ষ)
যদি আপনি কোন অক্ষের ডিরেকশন উল্টো করতে চান, যেমন Y-Axis এর উপরের দিকে ডেটা প্রদর্শন করতে চান, তবে reversed অপশন ব্যবহার করতে পারেন।
yAxis: {
reversed: true // Y-Axis এর ডিরেকশন উল্টো হবে
}
3. Multiple Axes (একাধিক অক্ষ)
Highcharts এ আপনি একাধিক অক্ষও ব্যবহার করতে পারেন। একাধিক Y-Axis ব্যবহার করতে নিচের কনফিগারেশনটি দেখতে পারেন।
yAxis: [{
title: {
text: 'বিক্রয়'
}
}, {
title: {
text: 'লাভ'
},
opposite: true // দ্বিতীয় Y-Axis রিভার্স অবস্থানে হবে
}]
এখানে, opposite: true এর মাধ্যমে দ্বিতীয় Y-Axis টি উল্টো দিকে (ডান দিকে) প্রদর্শিত হবে।
উপসংহার
Highcharts এ X-Axis এবং Y-Axis কনফিগারেশন খুবই গুরুত্বপূর্ণ, কারণ এগুলি চার্টের ডেটা প্রদর্শনের ফরম্যাট এবং আকার নির্ধারণ করে। সঠিকভাবে কনফিগার করা হলে, এটি ব্যবহারকারীদের জন্য ডেটা আরও স্পষ্ট এবং সহজবোধ্য করে তোলে। X-Axis এবং Y-Axis এর বিভিন্ন অপশন কাস্টমাইজ করে আপনি আপনার চার্টের ভিজুয়ালিজেশন এবং ইনফরমেশনকে উন্নত করতে পারেন।
Read more
