Chart.js-এ একাধিক ডেটাসেট ব্যবহার করে একাধিক সিরিজ বা ডেটা লাইন প্রদর্শন করা সম্ভব। এর মাধ্যমে একটি চার্টে একাধিক ডেটা ভিজ্যুয়ালাইজ করা যায়, যা ডেটার তুলনা করতে সাহায্য করে। এছাড়াও, লাইন স্টাইলিং ব্যবহার করে চার্টের লাইনগুলোকে কাস্টমাইজ করা যায়, যেমন রঙ, প্রস্থ, এবং স্টাইল।
Multiple Datasets in Chart.js
একাধিক ডেটাসেট ব্যবহার করে আপনি একটি চার্টে একাধিক লাইন বা বার প্রদর্শন করতে পারেন। এটি ব্যবহারকারীকে একাধিক ভিন্ন ডেটার মধ্যে তুলনা করতে সহায়তা করে। সাধারণত, ডেটাসেটের মাধ্যমে বিভিন্ন ডেটার মান ও সেটিংস পরিবর্তন করা হয়।
উদাহরণ: Multiple Datasets (লাইন চার্ট)
এখানে একটি লাইন চার্ট তৈরি করা হয়েছে যেখানে দুটি ডেটাসেট ব্যবহার করা হয়েছে:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line', // চার্ট টাইপ (লাইন চার্ট)
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'], // এক্স-অক্ষের লেবেল
datasets: [
{
label: 'Dataset 1', // প্রথম ডেটাসেটের লেবেল
data: [12, 19, 3, 5, 2, 3], // প্রথম ডেটাসেটের ডেটা পয়েন্ট
borderColor: 'rgba(75, 192, 192, 1)', // লাইন রঙ
borderWidth: 2, // লাইন প্রস্থ
fill: false // লাইনটি পূর্ণ হবে না
},
{
label: 'Dataset 2', // দ্বিতীয় ডেটাসেটের লেবেল
data: [6, 11, 15, 6, 8, 12], // দ্বিতীয় ডেটাসেটের ডেটা পয়েন্ট
borderColor: 'rgba(153, 102, 255, 1)', // লাইন রঙ
borderWidth: 2, // লাইন প্রস্থ
fill: false // লাইনটি পূর্ণ হবে না
}
]
},
options: {
responsive: true, // রেসপন্সিভ চার্ট
scales: {
y: {
beginAtZero: true // Y-অক্ষ শূন্য থেকে শুরু হবে
}
}
}
});
Explanation of Code:
- Multiple Datasets: এখানে দুটি ডেটাসেট (
Dataset 1এবংDataset 2) ব্যবহৃত হয়েছে, প্রতিটি ডেটাসেটে আলাদা ডেটা পয়েন্ট এবং লাইন রঙ রয়েছে। আপনি এখানে আরও ডেটাসেট যোগ করতে পারেন। - Border Color and Border Width: প্রতিটি ডেটাসেটের লাইন রঙ এবং প্রস্থ কাস্টমাইজ করা হয়েছে। এটি ডেটাসেটকে আলাদা এবং পরিষ্কারভাবে দেখতে সাহায্য করে।
- Fill:
fill: falseব্যবহার করে লাইনগুলোর নিচে পূর্ণতা দেওয়া হয়নি। আপনি যদি পূর্ণতা দিতে চান,fill: trueব্যবহার করতে পারেন।
Line Styling in Chart.js
Chart.js-এ লাইন স্টাইলিং কাস্টমাইজ করা যায়। এর মাধ্যমে আপনি লাইনটির রঙ, প্রস্থ, স্টাইল (যেমন ড্যাশড লাইন) পরিবর্তন করতে পারেন।
উদাহরণ: Line Styling (ড্যাশড লাইন)
এখানে লাইন স্টাইলিং কাস্টমাইজ করার জন্য একটি ড্যাশড লাইন (dashed line) তৈরি করা হয়েছে:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Dataset 1',
data: [12, 19, 3, 5, 2],
borderColor: 'rgba(75, 192, 192, 1)', // লাইন রঙ
borderWidth: 3, // লাইন প্রস্থ
fill: false, // পূর্ণতা দিবে না
borderDash: [5, 5] // ড্যাশড লাইন: [ড্যাশের দৈর্ঘ্য, স্পেস]
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
Line Styling Options:
borderDash:borderDashঅ্যারে ব্যবহার করে আপনি লাইনটির স্টাইল পরিবর্তন করতে পারেন। এটি দুইটি মান নেয়:- প্রথম মান: ড্যাশের দৈর্ঘ্য।
- দ্বিতীয় মান: ড্যাশের মধ্যে স্পেসের দৈর্ঘ্য।
উদাহরণ:
[5, 5]দিয়ে আপনি একটি ড্যাশড লাইন তৈরি করবেন, যেখানে 5px ড্যাশ এবং 5px স্পেস থাকবে।borderColor: লাইন রঙ পরিবর্তন করতে ব্যবহৃত হয়।borderWidth: লাইন প্রস্থ কাস্টমাইজ করার জন্য ব্যবহৃত হয়।
আরও কিছু Line Styling:
- Line Type: Chart.js-এ লাইনটির ধরন পরিবর্তন করতে পারেন, যেমন সোজা (straight), বেজি (bezier) ইত্যাদি।
lineTension: 0.4 // বেজি লাইন
- Point Style: পয়েন্টের আকার এবং রঙ পরিবর্তন করতে পারেন।
pointStyle: 'rect', // পয়েন্টকে রেকটেঙ্গেল আকারে দেখাবে
pointRadius: 5 // পয়েন্টের আকার
সারাংশ
Chart.js-এ multiple datasets ব্যবহার করে একাধিক ডেটাসেটের চার্ট তৈরি করা যায়, যা বিভিন্ন ডেটার তুলনা করতে সহায়ক। একইভাবে, line styling কাস্টমাইজেশন ব্যবহার করে লাইনগুলির রঙ, প্রস্থ এবং স্টাইল পরিবর্তন করা যায়, যা চার্টের দৃষ্টিনন্দনতা এবং বোধগম্যতা বাড়ায়। borderDash, borderColor, এবং borderWidth সহ অন্যান্য স্টাইলিং অপশন ব্যবহার করে আপনি আপনার চার্টের লাইনগুলোকে আরও কাস্টমাইজ করতে পারেন।
Read more
