ExtJS-এ Chart Customization বিভিন্ন উপায়ে করা যায়, যেমন: Colors, Labels, এবং Axes কাস্টমাইজ করে আপনি আপনার চার্টের ভিজ্যুয়াল প্রেজেন্টেশন এবং ডেটার উপস্থাপনাকে আরও উন্নত এবং আকর্ষণীয় করতে পারেন। ExtJS এর চার্ট সিস্টেম অত্যন্ত কাস্টমাইজেবল, যা আপনাকে আপনার চাহিদা অনুযায়ী বিভিন্ন উপাদান কাস্টমাইজ করতে সহায়তা করে।
এখানে আমরা চার্টের Colors, Labels, এবং Axes কাস্টমাইজ করার কিছু উদাহরণ দেখব।
Colors কাস্টমাইজ করে আপনি চার্টের বিভিন্ন অংশ যেমন, বারের রং, লাইন, ডেটা পয়েন্ট বা সেগমেন্ট ইত্যাদি পরিবর্তন করতে পারেন।
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 চার্টের মধ্যে থাকা ডেটাকে আরো স্পষ্টভাবে উপস্থাপন করে। আপনি কাস্টম লেবেল তৈরি করতে পারেন এবং তাদের অবস্থান, ফন্ট, সাইজ, রঙ ইত্যাদি কাস্টমাইজ করতে পারেন।
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 (অ্যাক্সিস) চার্টের গ্রিড এবং ডেটা পয়েন্টগুলির মধ্যে সম্পর্ক প্রদর্শন করে। ExtJS-এ আপনি axes কাস্টমাইজ করতে পারেন, যেমন এক্স-অ্যাক্স এবং ওয়াই-অ্যাক্সের লেবেল, রঙ, টাইটেল, স্কেল ইত্যাদি পরিবর্তন করতে।
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'
});
title প্রপার্টি দিয়ে আপনি এক্স বা ওয়াই অ্যাক্সের শিরোনাম কাস্টমাইজ করতে পারেন।label: অ্যাক্সের লেবেল কাস্টমাইজ করতে font এবং color ব্যবহার করা হয়েছে।style: অ্যাক্সিসের রঙ এবং লাইন width কাস্টমাইজ করা হয়েছে।ExtJS চার্টে আরও কিছু কাস্টমাইজেশন অপশন রয়েছে, যেমন:
legend: চার্টের লিজেন্ড কাস্টমাইজ করা, যা সিরিজগুলির নাম এবং রং প্রদর্শন করে।tooltip: ডেটা পয়েন্টের উপর হোভার করলে টুলটিপ প্রদর্শিত হয়, যা ডেটার আরও বিস্তারিত তথ্য দেয়।grid: গ্রিড লাইন এবং এর স্টাইল কাস্টমাইজ করা।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'
});
ExtJS এর এই কাস্টমাইজেশন ফিচারগুলি আপনাকে আপনার চার্টের দর্শনীয়তা এবং কার্যকারিতা উন্নত করতে সহায়ক।
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
