Chartjs + jsPDF = 图片模糊问题

Question

Chartjs + jsPDF = 图片模糊问题

9

我是一个有用的助手，可以为您翻译文本。

我遇到了一些导出图表到PDF的问题。

我有这个div

    <div id="chart-area">
    <button type="button" id="btnPrint_" onClick="Print1()">Print</button>
    <?php echo '<h2 id="title">'.$_SESSION['team_name'].'</h2>'; ?>
        <canvas id="myChart" width="800" height="400"></canvas>
        <div id="legend"></div>
    </div>

我正在使用ChartJS创建图表。

$( document ).ready(function(){
    var helpers = Chart.helpers;
    var canvas = document.getElementById('myChart');
    var data = {
        labels: unique_dates,
        datasets: [
            {
                label: "Ticket Count",
                fillColor: "rgba(107, 110, 111, 0.6)",
                strokeColor: "rgba(107, 110, 111, 0.6)",
                highlightFill: "rgba(107, 110, 111, 0.6)",
                highlightStroke: "rgba(151,137,200,1)",
                data: ticket_count
            },
            {
                label: "Subsidy Count",
                fillColor: "rgba(8, 126, 210,0.5)",
                strokeColor: "rgba(8, 126, 210,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: subsidy_count
            }
        ]
    }


  var bar = new Chart(canvas.getContext('2d')).Bar(data, {
  tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>kb",
  animation: true,
});
// 
var legendHolder = document.createElement('div');
legendHolder.innerHTML = bar.generateLegend();

document.getElementById('legend').appendChild(legendHolder.firstChild); 

});

当我点击“btnPrint_”按钮时，我希望将我的图表导出为PDF文件，就像这样。

function Print1() {
            var title = $("#title").text();
            var doc = new jsPDF('l', 'mm',[210, 297]);
           html2canvas($("#myChart"), {
                onrendered: function(canvas) {         
                    var imgData = canvas.toDataURL('image/png',1.0);                  
                    doc.text(130,15,title+" GT Log");
                    doc.addImage(imgData, 'PNG',20,30,0,130); 
                    doc.addHTML(canvas);
                    doc.save(title+'gt_log.pdf');             
                    }       
            });

}

问题是我的图表在pdf文件中非常模糊。

有什么办法可以解决这个问题吗？

这是我第一次使用ChartJS和jsPDF，可能我做错了什么。

谢谢！

- Tiago São José

3个回答

7

自从几个版本之前，Chart.js就有了devicePixelRatio参数。默认情况下，画布以显示器的DPI数值进行渲染，通常为96或Retina - 适用于屏幕，但不适合打印。

如果您增加此值，则会创建更多像素。扩大该值可将图表导出为Base64图像，并使其具备打印质量，但这个值不会影响在显示器上显示的图表。

在我的情况下，我将该值设置为1.5。

options:{
      devicePixelRatio: 1.5
}

文档：https://www.chartjs.org/docs/3.0.2/configuration/device-pixel-ratio.html 非常出色地发挥作用...

- Sarah Trees

更新 devicePixelRatio 对我很有帮助。谢谢。 - Wasti

1

我一直在做一个项目，试图使用Chartjs生成图表，然后使用Chrome的打印为PDF功能进行打印，但发现Chartjs生成的图表质量较差。在阅读了StackOverflow和Github上的各种讨论后，我开发了一个解决方案，对我来说足够好用。

在我的情况下，我需要固定大小的图表，并且不能使其具有响应性，因为我需要它们正确地适合打印页面。我使用样式标签设置大小：

- kholdstayr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- crabbly · Accepted Answer

分辨率取决于画布大小。当您增加画布的宽度和高度时，下载PDF文件时的分辨率会更好。

然而，您可能不希望太大幅度地增加画布大小，所以一个技巧是创建一个隐藏的画布，并将其宽度和高度增加，使用它来打印图表并创建PDF，从而获得更好的PDF质量。

这里有一个演示，其中提供了两个选项，一个选项可以从原始画布/图表创建PDF，另一个选项可以从隐藏的画布/图表创建新的PDF。您可以看到比较两个结果时，质量提高了很多。

https://jsfiddle.net/crabbly/kL68ey5z/

我不认为这是最好的解决方案，但这是我能想到的唯一方法来提高PDF图表文件的质量。我目前正在研究这两个库，特别是jsPDF在创建文档时如何处理w和h参数。

此外，Chart.js确实配备了一个内置函数来从图表中提取图像（.toBase64Image()），但是在我的测试中质量似乎更差。