Chart.js-এ আপনি সহজেই আপনার চার্টকে PNG বা JPEG ফরম্যাটে এক্সপোর্ট করতে পারেন। এটি ব্যবহারকারীদের জন্য চার্টের একটি ছবির ফাইল তৈরি করতে সহায়ক হতে পারে, যা তারা ডাউনলোড করে রাখতে বা শেয়ার করতে পারে। Chart.js এর toBase64Image() পদ্ধতি ব্যবহার করে চার্টকে PNG বা JPEG ফরম্যাটে এক্সপোর্ট করা সম্ভব।
এই গাইডে আমরা দেখবো কিভাবে PNG বা JPEG ফরম্যাটে চার্ট এক্সপোর্ট করা যায়।
1. PNG ফরম্যাটে চার্ট এক্সপোর্ট করা
Chart.js চার্টকে PNG ফরম্যাটে এক্সপোর্ট করার জন্য toBase64Image() পদ্ধতি ব্যবহার করা হয়। এই পদ্ধতি আপনাকে চার্টের একটি Base64 ইনকোডেড ইমেজ রিটার্ন করে, যা আপনি PNG ফরম্যাটে ডাউনলোড বা প্রিভিউ করতে ব্যবহার করতে পারেন।
উদাহরণ: Chart.js থেকে PNG এক্সপোর্ট করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Export Chart as PNG</title>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<button id="downloadPNG">Download as PNG</button>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// PNG Download Functionality
document.getElementById('downloadPNG').addEventListener('click', function() {
const imageUrl = myChart.toBase64Image(); // Convert chart to PNG
const link = document.createElement('a'); // Create an anchor element
link.href = imageUrl; // Set the href to the image URL
link.download = 'chart.png'; // Set download attribute to specify filename
link.click(); // Trigger the download
});
</script>
</body>
</html>
ব্যাখ্যা:
toBase64Image(): এই পদ্ধতিটি চার্টের ইমেজ হিসেবে Base64 ইনকোডেড PNG রিটার্ন করে।downloadattribute: লিঙ্কেরdownloadঅ্যাট্রিবিউট ব্যবহার করে আপনি ইমেজের নাম এবং ফরম্যাট নির্ধারণ করতে পারেন।link.click(): এটি ব্যবহারকারীর জন্য ছবিটি ডাউনলোড করার প্রক্রিয়া শুরু করে।
2. JPEG ফরম্যাটে চার্ট এক্সপোর্ট করা
Chart.js এ JPEG ফরম্যাটে চার্ট এক্সপোর্ট করার জন্য toBase64Image() পদ্ধতি ব্যবহার করা যেতে পারে, তবে আপনাকে canvas.toDataURL() মেথডে MIME টাইপ পরিবর্তন করে JPEG ফরম্যাট ব্যবহার করতে হবে।
উদাহরণ: Chart.js থেকে JPEG এক্সপোর্ট করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Export Chart as JPEG</title>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<button id="downloadJPEG">Download as JPEG</button>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April'],
datasets: [{
label: 'Sales Data',
data: [12, 19, 3, 5],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// JPEG Download Functionality
document.getElementById('downloadJPEG').addEventListener('click', function() {
const imageUrl = myChart.toBase64Image('image/jpeg'); // Convert chart to JPEG
const link = document.createElement('a'); // Create an anchor element
link.href = imageUrl; // Set the href to the image URL
link.download = 'chart.jpeg'; // Set download attribute to specify filename
link.click(); // Trigger the download
});
</script>
</body>
</html>
ব্যাখ্যা:
toBase64Image('image/jpeg'): এই পদ্ধতিimage/jpegMIME টাইপ প্রদান করে JPEG ফরম্যাটে চার্ট রেন্ডার করবে।downloadattribute: JPEG ফাইলের নাম নির্ধারণ করার জন্য।
3. চিত্রের গুণমান কাস্টমাইজ করা
Chart.js এর মাধ্যমে JPEG ফরম্যাটে এক্সপোর্টের ক্ষেত্রে আপনি ইমেজের গুণমানও কাস্টমাইজ করতে পারেন। এটি toDataURL() পদ্ধতির দ্বিতীয় প্যারামিটার হিসেবে গুণমানের মান গ্রহণ করে (0 থেকে 1 পর্যন্ত, যেখানে 1 হলো সর্বোচ্চ গুণমান)।
উদাহরণ: JPEG এক্সপোর্টের গুণমান কাস্টমাইজ করা
const imageUrl = myChart.toBase64Image('image/jpeg', 0.7); // JPEG গুণমান 0.7
এখানে, 0.7 গুণমানের মান নির্ধারণ করছে (যেটি 0 থেকে 1 এর মধ্যে হতে পারে), যাতে চিত্রের আকার ছোট রাখা যায়।
4. চার্ট এক্সপোর্টের জন্য ডাউনলোড বাটন তৈরি করা
আপনার ওয়েব পেজে একটি ডাউনলোড বাটন যোগ করে ব্যবহারকারীদের চার্ট ইমেজ ডাউনলোড করতে দেয়ার জন্য download অ্যাট্রিবিউট ব্যবহার করা যেতে পারে। এটি একটি ব্যবহারকারী-বান্ধব পদ্ধতি।
উদাহরণ: এক্সপোর্ট বাটন দিয়ে PNG/JPEG এক্সপোর্ট
<button id="downloadChartPNG">Download PNG</button>
<button id="downloadChartJPEG">Download JPEG</button>
এবং JavaScript কোড:
document.getElementById('downloadChartPNG').addEventListener('click', function() {
const imageUrl = myChart.toBase64Image(); // PNG এক্সপোর্ট
const link = document.createElement('a');
link.href = imageUrl;
link.download = 'chart.png'; // PNG নাম
link.click();
});
document.getElementById('downloadChartJPEG').addEventListener('click', function() {
const imageUrl = myChart.toBase64Image('image/jpeg'); // JPEG এক্সপোর্ট
const link = document.createElement('a');
link.href = imageUrl;
link.download = 'chart.jpeg'; // JPEG নাম
link.click();
});
সারাংশ
Chart.js দিয়ে PNG এবং JPEG ফরম্যাটে চার্ট এক্সপোর্ট করা খুবই সহজ। আপনি toBase64Image() পদ্ধতি ব্যবহার করে ইমেজ তৈরি করতে পারেন এবং download অ্যাট্রিবিউট সহ একটি ডাউনলোড লিঙ্ক ব্যবহার করে ব্যবহারকারীকে চার্টের ছবি ডাউনলোড করার সুযোগ দিতে পারেন। এই পদ্ধতি বিশেষত যখন চার্ট ডেটার গ্রাফিক্স প্রয়োজন হয় এবং ব্যবহারকারীকে তা শেয়ার করতে হবে তখন খুবই কার্যকর।
Read more
