ngx-charts-bar-vertical-2d отображается по-разному при экспорте в pdf

Я использую ngx-charts в своем приложении angular 7. Я создаю панель инструментов, и некоторые из моих карточек содержат ngx-диаграммы. Моя проблема в том, что когда я экспортирую его с помощью jspdf следующим образом:

            var data = document.getElementById('dashboardArea');
            html2canvas(data).then(canvas => {
                // Few necessary setting options  
                var imgWidth = 208;
                var pageHeight = 295;
                var imgHeight = canvas.height * imgWidth / canvas.width;
                var heightLeft = imgHeight;
    
                const contentDataURL = canvas.toDataURL('image/png')
                let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF  
                var position = 0;
                pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
                pdf.save('MYPdf.pdf'); // Generated PDF

Или получить внутренний html таким образом:

    var data = document.getElementById('dashboardArea');
    var innerhtml = data.innerHTML;

и отправив его на сервер, используя всевозможные создатели PDF, я получаю тот же результат. область диаграммы черная.

моя диаграмма в браузере та же диаграмма при экспорте в PDF любыми инструментами

Линейная диаграмма ngx нормально отображается в PDF.

Кто-нибудь знает, как это исправить?

Тх Тал.


angular ngx-charts
person tal    schedule 22.04.2019    source источник
comment
Вы пробовали это (способ изменить цвет оси и меток) ?   -  person Chunbin Li    schedule 22.04.2019

Ответы (1)


arrow_upward
1
arrow_downward

Та же проблема возникает и у меня, тогда я использую domtoImage вместо html2Canvas.

domtoimage.toPng(document.getElementById(chartId)).then(function(dataUrl) {
  const imgProps = pdf.getImageProperties(dataUrl);
  pdf.addImage(dataUrl, 'png', 20, 30, imgProps.width, imgProps.height);
  pdf.save(fileName);
}

Это не вызовет никаких проблем с черным bg.

person NeenuChandran    schedule 13.11.2019