Chart.js CDN (Content Delivery Network) ব্যবহার করে সহজেই ইন্সটল করা যায়। এটি দ্রুত এবং সরাসরি চার্ট তৈরি করার উপায় প্রদান করে, যেখানে আপনাকে ফাইল ডাউনলোড বা লোকাল স্টোরেজ ব্যবহার করতে হয় না।
Chart.js CDN ব্যবহার করার ধাপ
ধাপ ১: HTML ডকুমেন্টে Chart.js যুক্ত করা
আপনার HTML ফাইলে <script> ট্যাগের মাধ্যমে Chart.js এর CDN লিঙ্ক যোগ করুন। এটি Chart.js এর সর্বশেষ ভার্সন সরাসরি লোড করবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js CDN Example</title>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Custom Script -->
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
ধাপ ২: HTML ফাইলে একটি <canvas> যোগ করা
Chart.js একটি HTML5 <canvas> এলিমেন্ট ব্যবহার করে চার্ট রেন্ডার করে। উপরের উদাহরণে, আমরা <canvas> যোগ করেছি:
<canvas id="myChart" width="400" height="200"></canvas>
ধাপ ৩: চার্ট তৈরি করার জন্য জাভাস্ক্রিপ্ট কোড
চার্ট তৈরি করতে Chart.js লাইব্রেরি ব্যবহার করে জাভাস্ক্রিপ্ট কোড লিখুন। উদাহরণস্বরূপ, বার চার্ট তৈরির কোড:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // চার্ট টাইপ: বার (Bar)
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], // এক্স-অক্ষের লেবেল
datasets: [{
label: '# of Votes', // ডেটাসেটের নাম
data: [12, 19, 3, 5, 2, 3], // ডেটা পয়েন্ট
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
সুবিধা
- সহজ এবং দ্রুত: কোনো অতিরিক্ত সেটআপ ছাড়াই Chart.js ব্যবহার করা যায়।
- সর্বশেষ ভার্সন অ্যাক্সেস: CDN স্বয়ংক্রিয়ভাবে সর্বশেষ Chart.js লাইব্রেরি লোড করে।
- কোনো লোকাল ফাইল প্রয়োজন নেই: লোকাল স্টোরেজের ওপর নির্ভরশীলতা কমায়।
CDN এর মাধ্যমে Chart.js ইন্সটল করা সহজ, দ্রুত এবং ব্যবহার উপযোগী। এটি বিশেষত দ্রুত ডেভেলপমেন্ট প্রোজেক্টের জন্য কার্যকর।
Content added By
Read more
