Графики SVG в jspdf перекрываются в PDF - PullRequest
Новая
       30

Графики SVG в jspdf перекрываются в PDF

0 голосов
/ 07 марта 2019

Я хочу включить SVG-диаграммы в jspdf, он показывает, но перекрывает друг друга.Один из них представляет собой линейную диаграмму, а два других представляют собой круговые диаграммы. 

<canvas id="yearSubmissionsChart" data-dates='<?php echo json_encode($dates,JSON_PRETTY_PRINT);?>' data-value='<?php echo json_encode($dateval,JSON_PRETTY_PRINT);?>'></canvas> // Line chart

<div id="p1" class="cgpie"></div> // Pie chart1

<div id="p2" class="cgpie"></div> // Pie chart2

<button type="button" class="btn btn-warning" id="newbtndownload">Download to PDF</button> // Download PDF button



 [![$("#newbtndownload").click(function(){ // JS code for download PDF
    var pdf = new jsPDF();

                    var dashtoCanvas = document.getElementById('yearSubmissionsChart');
                    var toPNG = dashtoCanvas.toDataURL("image/png", 1.0);
                    pdf.addImage(toPNG, 'png', 5, 5, 150,100 );

                    var svg = $('#p1').html();
                    if (svg)
                    svg = svg.replace(/\r?\n|\r/g, '').trim();
                    var canvas = document.createElement('canvas');
                    var context = canvas.getContext('2d');
                    context.clearRect(0, 0, 170, 130);
                    canvg(canvas, svg);
                    var imgData = canvas.toDataURL('image/png');
                    pdf.text(0, 0, "Birth Year Split");
                    pdf.addImage(imgData, 'PNG', 60, 60, 95, 95);

                    var svg1 = $('#p5').html();
                    if (svg1)
                        svg1 = svg1.replace(/\r?\n|\r/g, '').trim();
                    var canvas1 = document.createElement('canvas');
                    var context1 = canvas1.getContext('2d');
                    context1.clearRect(0, 0, 170, 130);
                    canvg(canvas1, svg1);
                    var imgData1 = canvas1.toDataURL('image/png');
                    pdf.text(15, 15, "Valid vs Invalid child NRIC");
                    pdf.addImage(imgData1, 'PNG', 70, 70, 95, 95);
pdf.save("gsb-dashboard-charts.pdf");
            });

        });][1]][1]

Диаграммы отображаются в формате PDF, но не в хорошем формате.Я конвертирую SVG в canvas, а затем включаю в PDF.Пожалуйста, смотрите прикрепленное изображение.

Снимок экрана PDF: https://i.stack.imgur.com/nQ1OJ.png

необходимо доставить сегодня.

...