HOW TO CREATE CHARTS FOR PRINTING
May 10, 2022 Copy Link
السلام عليكم 👋
النهاردة هنشوف إزاي نقدر نعمل أشكال و رسومات هندسة بإستخدام الجافا إسكربت 📊
آخر بروجكت إشتغلت عليه كان مطلوب مني أعمل إحصائيات لمجموعة من البيانات و بعدين أعمل تصدير عن طريق بي دي إف أو وورد و عملت سيرش كتير و لقيت حاجتين كويسين أوي 🤙
1-) ChartJS
المكتبة دي جميلة جداً و هي بتعتمد علي إنك تكريت canvas تاج و بعدين تبدء ترسم الشكل اللي إنت عايزه بس و أنا بستخدمها قابلتني شوية مشاكل 🤯
أولاً أنا كنت بجيب البيانات من AJAX ريكويست و بعدين ببدء أستخدم البيانات اللي راجعه في إني أرسم الأشكال الهندسية, يعني الموضوع مش ثابت دايماً, مش فاكر الطريقة القديمة اللي كنت بعرض بيها الأشكال بس كان في خطأ في الطباعة و أنا بعمل تصدير سواء بي دي إف أو وورد, فا قولت إني ممكن أحاول أخد إسكرين شوت لل parent tag اللي فيه كل ال canvas تاجز, و بعد سيرش لقيت html2canvas و هي فعلاً كانت بتعملي دا و بعدين كنت بحمل الصورة عادي بس لقيت مشلكة و هي إن خلفية الصورة كانت بتبقا سودا غير إن جودة الصورة كانت ضعيفة جداً فعملت سيرش و لقيت أكواد بتتحكم في لون الخلفية و فعلاً إشتغلت معايا بس كان في أخطاء بتحصل برضو و عشان كدا روحت للباكدج التانية و هي 👇
2-) CanvasJS
الباكدج العظيمة دي جربتها و كل حاجة كانت تمام بس كان في مشكلة و هي إنها بتعمل watermark علي كل الأشكال و دا مكنش راضيني و برضو مكنتش كل حاجة تمام 😵
فا رجعت لأول باكدج تاني و بعد محاولات كتيرة جداً و تفكير وصلت لكود عظيم, و فكرته إني كنت بلوب علي الداتا اللي راجعه في الريسبونس و بكريت canvas تاج في كل لفة بعدين بمسك كل تاج و أبدء أرسم فيه براحتي و فعلاً الحمدلله الموضوع مشي تمام, و ?guess what موضوع الطباعة كمان إشتغل و الكود الجاي هيوضح دا 👇
const tableHeaderElements = document.getElementsByClassName('table_header');
for (var i = 0; i < 4; i++) {
var exportHTML = `<div class="d-flex justify-content-between mb-2 page_break_inside" style="width:45%;">
<table class="table export_table"><thead><th>THead</th><th>${$(`#thead_${i}`).find(`th:eq(${i})`).text()}</th></thead><tbody>`;
for (var j = 0; j < tableHeaderElements.length; j++) {
exportHTML += `<tr><td>${$(`#table_header_${j}`).text()}</td><td>${$(`#tbody_${j} tr`).find(`td:eq(${i})`).text()}</td></tr>`;
}
exportHTML += `</tbody></table></div><div style="width:45%;"><canvas id="chart_${i}" height=220></canvas></div></div>`;
$('#exportDataContainer').append(exportHTML);
}
new Chart(document.getElementById('chart_0').getContext('2d'), {
type: 'bar',
data: {
labels: ["student 1", "student 2", "student 3", "student 4"],
datasets: [{
label: ['The Label'],
data: [10, 20, 30, 40],
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(130, 180, 70, 0.2)', 'rgba(202, 150, 92, 0.2)',
'rgba(192, 160, 128, 0.2)', 'rgba(33, 159, 148, 0.2)',
],
borderWidth: 1
}]
},
});
و عشان أطبع بي دي إف, إستخدمت باكدج عظيمة جداً و اللي كنت إتكلمت عنها في مقالة قبل كدا, بس كان بيقابلني مشكلة صغيرة كدا و هي إن الجداول اللي كنت بطبعها كانت ممكن يتم طباعتها علي صفحتين و كان شكلها مش الطف حاجة و بعد سيرش كتير جداً وصلت لكود ال CSS دا, وطبعاً ال class دا موجود عند ال parent tag زي ما واضح في الكود اللي فوق
.page_break_inside {
page-break-inside: avoid;
}
أما بالنسبة لجزء طباعة الوورد كنت بكريت كل ال elements تاني لأني جربت كذا باكدج و الموضوع منفعش, فلجئت للحل دا 🙌
var tableElement = document.createElement('table');
var tableBodyElement = document.createElement('tbody');
var firstRowElement = document.createElement('tr');
tableElement.setAttribute('style', 'width:100%;padding:4px 4px;margin-bottom:10px;border-collapse:collapse;');
var imgElement = document.createElement('img');
imgElement.src = document.getElementById("chart_0").toDataURL('image/png');
imgElement.setAttribute('style', 'width:100%');
firstRowElement.append(imgElement);
tableBodyElement.append(firstRowElement);
tableElement.append(tableBodyElement);
var bodyWORD = document.createElement('div');
bodyWORD.append(tableElement);
var exportBodyWORD = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40"><body>${bodyWORD.innerHTML}</body></html>`
var BLOB = new Blob(['\ufeff', exportBodyWORD], { type: 'application/msword' });
var url = URL.createObjectURL(BLOB);
var link = document.createElement('a');
link.href = url;
link.download = 'export_word';
document.body.appendChild(link);
if (navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(BLOB, `export_word.doc`);
} else {
link.click();
}
document.body.removeChild(link);
و أخيراً لينك البروجكت 🚀
و بكدا أكون خلصت و أتمني تكون إستفدت ✔