Chart.js-এ তৈরি করা চার্টগুলোকে PDF রিপোর্ট-এ অন্তর্ভুক্ত করার জন্য, আমরা সাধারণত চার্টটিকে একটি ইমেজ ফরম্যাটে কনভার্ট করি এবং তারপর PDF ফাইল তৈরির জন্য এটি যুক্ত করি। এই প্রক্রিয়ায় সাধারণত jsPDF লাইব্রেরি ব্যবহার করা হয়, যা ব্রাউজারে ডাইনামিকভাবে PDF ফাইল তৈরি করতে সহায়তা করে।
এখানে আমরা দেখবো কীভাবে Chart.js এর চার্টগুলোকে jsPDF ব্যবহার করে PDF রিপোর্টে অন্তর্ভুক্ত করা যায়।
1. Chart.js এর চার্ট তৈরি করা
প্রথমে, আমরা একটি সাধারণ Chart.js চার্ট তৈরি করব। এরপর, এই চার্টটিকে ইমেজে কনভার্ট করে jsPDF-এর মাধ্যমে PDF-এ ইনক্লুড করব।
উদাহরণ: Chart.js চার্ট তৈরি করা
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js in PDF Report</title>
</head>
<body>
<h1>Chart.js in PDF</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<button id="downloadPdf">Download PDF</button>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // বার চার্ট
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// Download PDF button click event
document.getElementById('downloadPdf').addEventListener('click', () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
// Chart as an image
const chartImage = myChart.toBase64Image(); // Chart as Base64 image
// Add the image to PDF
doc.addImage(chartImage, 'PNG', 10, 10, 180, 100); // Position and size of the image
// Add text to PDF (optional)
doc.text('Sales Data Chart', 10, 120);
// Save the PDF
doc.save('report.pdf');
});
ব্যাখ্যা:
- Chart.js: একটি সাধারণ বার চার্ট তৈরি করা হয়েছে যার পাঁচটি লেবেল এবং কিছু ডেটা রয়েছে।
toBase64Image(): Chart.js এরtoBase64Image()ফাংশন ব্যবহার করে চার্টকে একটি Base64 Image ফরম্যাটে কনভার্ট করা হয়েছে। এটি ছবির মতো পিডিএফে যোগ করার জন্য উপযুক্ত।- jsPDF: jsPDF লাইব্রেরি ব্যবহার করে চার্ট ইমেজকে পিডিএফ-এ যোগ করা হয়েছে।
addImage()ফাংশন ব্যবহার করে Base64 ইমেজ পিডিএফে যোগ করা হয়েছে।text()ফাংশন ব্যবহার করে পিডিএফে কিছু টেক্সট যোগ করা হয়েছে (যেমন, "Sales Data Chart")।
- Download PDF:
doc.save()ফাংশন ব্যবহার করে পিডিএফটি ডাউনলোড করা হয়।
2. Chart.js-এর চার্টের ইমেজ হিসাবে এক্সপোর্ট
Chart.js-এ তৈরি করা চার্টটি এক্সপোর্ট করতে Base64 ইমেজ ফরম্যাট ব্যবহার করা হয়। এটি ডাউনলোডের জন্য পিডিএফ-এ অথবা অন্য কোনো ইমেজ ফরম্যাটে যুক্ত করা যেতে পারে।
উদাহরণ: toBase64Image() ব্যবহার
// Base64 image export
const chartImage = myChart.toBase64Image();
console.log(chartImage); // Base64 ইমেজ কনসোলে দেখাবে
এটি ইমেজকে একটি PNG ফরম্যাটে রেন্ডার করে, যা আপনি সহজেই PDF বা অন্য ফরম্যাটে সংযুক্ত করতে পারবেন।
3. PDF এ একাধিক চার্ট যোগ করা
আপনি যদি একাধিক চার্টের জন্য পিডিএফ তৈরি করতে চান, তাহলে প্রতিটি চার্টের ইমেজ আলাদা আলাদা ভাবে addImage() ফাংশন ব্যবহার করে পিডিএফে যোগ করতে পারেন।
উদাহরণ: একাধিক চার্ট ইমেজ পিডিএফে যোগ করা
document.getElementById('downloadPdf').addEventListener('click', () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
// First chart as an image
const chartImage1 = myChart.toBase64Image();
doc.addImage(chartImage1, 'PNG', 10, 10, 180, 100); // Position and size
// Second chart (new chart)
const myChart2 = new Chart(ctx, {
type: 'line', // Line chart
data: {
labels: ['January', 'February', 'March', 'April'],
datasets: [{
label: 'Revenue',
data: [50, 70, 90, 120],
borderColor: 'rgba(255, 99, 132, 1)',
fill: false
}]
}
});
const chartImage2 = myChart2.toBase64Image();
doc.addImage(chartImage2, 'PNG', 10, 120, 180, 100); // Position and size
// Save the PDF
doc.save('multiple_charts_report.pdf');
});
এখানে:
- প্রথম চার্ট Line Chart এবং দ্বিতীয় চার্ট Bar Chart হিসেবে রেন্ডার করা হয়েছে।
- প্রতিটি চার্টকে Base64 ইমেজ হিসেবে পিডিএফে যোগ করা হয়েছে।
4. Chart.js এবং jsPDF পারফরম্যান্স অপটিমাইজেশন
বড় ডেটাসেট বা জটিল চার্টগুলির জন্য jsPDF-এ চার্টের পারফরম্যান্স অপটিমাইজ করার জন্য কিছু পদক্ষেপ নেয়া যেতে পারে:
- Chart Rendering Optimization: চার্টের rendering অপটিমাইজ করার জন্য গ্রিডলাইন, অ্যানিমেশন ইত্যাদি কমানো যেতে পারে।
- Image Compression: ইমেজের আকার কমানোর জন্য ইমেজ compression করা যেতে পারে।
- Chart Resize: চার্টের সাইজ ছোট বা বড় করে ডাউনলোড করা।
সারাংশ
Chart.js এর চার্টগুলোকে PDF রিপোর্ট-এ অন্তর্ভুক্ত করার জন্য, আমরা সাধারণত jsPDF ব্যবহার করি। প্রথমে চার্টটি Base64 ইমেজ ফরম্যাটে কনভার্ট করা হয়, এবং তারপর jsPDF-এর মাধ্যমে পিডিএফে যোগ করা হয়। এটি কেবলমাত্র Chart.js-এর চার্টই নয়, অন্যান্য গ্রাফিক্যাল বা ডেটা ভিজ্যুয়ালাইজেশন রিপোর্ট তৈরি করার জন্যও কার্যকরী।
Read more
