ExtJS-এ Chart Customization বিভিন্ন উপায়ে করা যায়, যেমন: Colors, Labels, এবং Axes কাস্টমাইজ করে আপনি আপনার চার্টের ভিজ্যুয়াল প্রেজেন্টেশন এবং ডেটার উপস্থাপনাকে আরও উন্নত এবং আকর্ষণীয় করতে পারেন। ExtJS এর চার্ট সিস্টেম অত্যন্ত কাস্টমাইজেবল, যা আপনাকে আপনার চাহিদা অনুযায়ী বিভিন্ন উপাদান কাস্টমাইজ করতে সহায়তা করে।
এখানে আমরা চার্টের Colors, Labels, এবং Axes কাস্টমাইজ করার কিছু উদাহরণ দেখব।
১. Colors Customization
Colors কাস্টমাইজ করে আপনি চার্টের বিভিন্ন অংশ যেমন, বারের রং, লাইন, ডেটা পয়েন্ট বা সেগমেন্ট ইত্যাদি পরিবর্তন করতে পারেন।
Colors Customization (Bar, Line, Pie)
Bar Chart Example with Custom Colors:
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['category', 'value'],
data: [
{ category: 'Q1', value: 10 },
{ category: 'Q2', value: 20 },
{ category: 'Q3', value: 30 },
{ category: 'Q4', value: 40 }
]
},
axes: [{
type: 'numeric',
position: 'left',
title: 'Value'
}, {
type: 'category',
position: 'bottom',
title: 'Quarter',
fields: ['category']
}],
series: [{
type: 'bar',
xField: 'category',
yField: 'value',
style: {
fill: '#FF5733', // Custom color for the bars
stroke: '#C70039',
lineWidth: 3
},
title: 'Quarterly Sales'
}],
title: 'Quarterly Sales Data'
});
style: এখানেfillএবংstrokeদ্বারা বার চার্টের রং কাস্টমাইজ করা হয়েছে।lineWidthদ্বারা বর্ডারের পুরুত্ব নির্ধারণ করা হয়েছে।
২. Labels Customization
Labels চার্টের মধ্যে থাকা ডেটাকে আরো স্পষ্টভাবে উপস্থাপন করে। আপনি কাস্টম লেবেল তৈরি করতে পারেন এবং তাদের অবস্থান, ফন্ট, সাইজ, রঙ ইত্যাদি কাস্টমাইজ করতে পারেন।
Labels Customization (Bar and Pie Chart)
Bar Chart Example with Custom Labels:
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['category', 'value'],
data: [
{ category: 'Q1', value: 10 },
{ category: 'Q2', value: 20 },
{ category: 'Q3', value: 30 },
{ category: 'Q4', value: 40 }
]
},
axes: [{
type: 'numeric',
position: 'left',
title: 'Value'
}, {
type: 'category',
position: 'bottom',
title: 'Quarter',
fields: ['category']
}],
series: [{
type: 'bar',
xField: 'category',
yField: 'value',
style: {
fill: '#FF5733'
},
label: {
field: 'value', // Field to display
display: 'insideEnd', // Position of label
font: '14px Arial', // Font style
color: '#000000' // Label color
}
}],
title: 'Quarterly Sales Data'
});
label: এখানে,fieldদ্বারা নির্দিষ্ট ফিল্ডের মান দেখানো হচ্ছে এবংdisplayদ্বারা লেবেলটির অবস্থান নির্ধারণ করা হয়েছে।fontএবংcolor: লেবেলটির ফন্ট এবং রঙ কাস্টমাইজ করা হয়েছে।
৩. Axes Customization
Axes (অ্যাক্সিস) চার্টের গ্রিড এবং ডেটা পয়েন্টগুলির মধ্যে সম্পর্ক প্রদর্শন করে। ExtJS-এ আপনি axes কাস্টমাইজ করতে পারেন, যেমন এক্স-অ্যাক্স এবং ওয়াই-অ্যাক্সের লেবেল, রঙ, টাইটেল, স্কেল ইত্যাদি পরিবর্তন করতে।
Axes Customization (X-axis, Y-axis)
Cartesians Axis Customization Example:
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['month', 'sales'],
data: [
{ month: 'Jan', sales: 15 },
{ month: 'Feb', sales: 20 },
{ month: 'Mar', sales: 25 },
{ month: 'Apr', sales: 30 }
]
},
axes: [{
type: 'numeric',
position: 'left',
title: 'Sales',
fields: ['sales'],
grid: true,
label: {
font: '16px Arial', // Custom font for labels
color: '#00F'
},
style: {
stroke: '#0000FF', // Custom color for axis
lineWidth: 2
}
}, {
type: 'category',
position: 'bottom',
title: 'Month',
fields: ['month'],
label: {
font: '14px Arial', // Custom font for labels
color: '#FF5733'
}
}],
series: [{
type: 'line',
xField: 'month',
yField: 'sales',
title: 'Monthly Sales'
}],
title: 'Monthly Sales Data'
});
- Axes Title:
titleপ্রপার্টি দিয়ে আপনি এক্স বা ওয়াই অ্যাক্সের শিরোনাম কাস্টমাইজ করতে পারেন। label: অ্যাক্সের লেবেল কাস্টমাইজ করতেfontএবংcolorব্যবহার করা হয়েছে।style: অ্যাক্সিসের রঙ এবং লাইন width কাস্টমাইজ করা হয়েছে।
৪. Other Customization Options
ExtJS চার্টে আরও কিছু কাস্টমাইজেশন অপশন রয়েছে, যেমন:
legend: চার্টের লিজেন্ড কাস্টমাইজ করা, যা সিরিজগুলির নাম এবং রং প্রদর্শন করে।tooltip: ডেটা পয়েন্টের উপর হোভার করলে টুলটিপ প্রদর্শিত হয়, যা ডেটার আরও বিস্তারিত তথ্য দেয়।grid: গ্রিড লাইন এবং এর স্টাইল কাস্টমাইজ করা।
Legend Customization Example:
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['category', 'value'],
data: [
{ category: 'Jan', value: 10 },
{ category: 'Feb', value: 20 },
{ category: 'Mar', value: 30 }
]
},
axes: [{
type: 'numeric',
position: 'left',
title: 'Value',
fields: ['value']
}, {
type: 'category',
position: 'bottom',
title: 'Category',
fields: ['category']
}],
series: [{
type: 'bar',
xField: 'category',
yField: 'value',
title: 'Monthly Sales'
}],
legend: {
position: 'top',
font: '14px Arial',
color: '#FF5733'
},
title: 'Sales Data'
});
সারাংশ
- Colors: ExtJS charts এ আপনি বর্ণ এবং স্টাইল কাস্টমাইজ করতে পারেন যেমন, বারের রং, লাইন রং, এবং ডেটা পয়েন্টের রং।
- Labels: চার্টের লেবেল এবং তার অবস্থান কাস্টমাইজ করা যায়। আপনি ফন্ট, রঙ, আকার ইত্যাদি পরিবর্তন করতে পারবেন।
- Axes: এক্স-অ্যাক্স এবং ওয়াই-অ্যাক্স এর লেবেল, টাইটেল, রঙ, স্কেল ইত্যাদি কাস্টমাইজ করা যায়।
- Legend and Tooltips: চার্টের লিজেন্ড এবং টুলটিপ ব্যবহার করে চার্টের অর্থ ব্যাখ্যা করা যায় এবং ইন্টারঅ্যাকটিভ করা হয়।
ExtJS এর এই কাস্টমাইজেশন ফিচারগুলি আপনাকে আপনার চার্টের দর্শনীয়তা এবং কার্যকারিতা উন্নত করতে সহায়ক।
Read more
