Chartjs + jsPDF =图片模糊 [英] Chartjs + jsPDF = Blurry image

问题描述

将图表导出为PDF时遇到一些问题。

我有这个div

 < div id = chart -区域> 
< 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 = {
标签：unique_dates，
数据集：[
 {
标签： Ticket Count，
 fillColor： rgba（107， 110、111、0.6），
笔触颜色： rgba（107、110、111、0.6），
高光填充： rgba（107、110、111、0.6），
 HighlightStroke： rgba（151,137,200,1），
数据：ticket_count 
}，
 {
标签：补贴计数，
 fillColor： rgba（8 ，126，210,0.5），
笔触颜色： rgba（8，126，210,0.8），
 Highlight填充： rgba（220,220,220,0.75），
 HighlightStroke： rgba（220,220,220,1），
数据：subsidy_count 
} 
] 
} 
 
 
 var bar = new Chart（canvas.getContext（'2d'））。Bar（data， {
 tooltipTemplate：<％if（label）{％><％= label％> ::<％}％<％= value％> kb，
动画：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，所以可能是我做错了。

谢谢！

解决方案

分辨率来自画布大小。您增加的Canvas（宽度和高度）越多，下载PDF时的分辨率就越好。

但是，您可能不想增加画布尺寸太大，因此，您可以使用的一个技巧是创建一个具有更高宽度和高度的隐藏Canvas，使用它来打印图表并创建PDF，从而获得更好的PDF质量。

这里有个小提琴来演示这一点，可以选择下载从原始画布/图表创建的PDF，还可以选择从隐藏的画布/图表下载新的PDF。比较这两个结果时，您会看到质量提高了多少。

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

我认为这不是最好的解决方案，但这是我提高PDF图表质量的唯一途径文件。我目前正在两个库中玩耍，特别是在创建文档时jsPDF如何对待 w 和 h 参数。 / p>

此外，Chart.js确实具有内置功能，可从图表中提取图像（ .toBase64Image（）），但是，当我测试时，质量似乎更差。

I'm having some issues exporting my Charts to PDF.

I have this 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>

and I'm creating my chart using 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); 

});

When I click the btnPrint_ Button I want to export my chart as PDF

like this

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');             
                    }       
            });

}

The problem is that my chart is totally blurry in the pdf file.

Any idea how to fix this?

it's the first time that I'm using ChartJS and jsPDF so probably I'm doing something wrong.

Thanks!

解决方案

The resolution comes from the Canvas size. The more you increase your Canvas (width and height), the better will be the resolution when downloading your PDF.

However, you probably don't want to increase the canvas size too much, so, one trick you could use is to create a hidden Canvas, with a higher width and height, use it to print the chart and create the PDF, getting a better PDF quality.

Here is a fiddle demonstrating this, with an option to download a PDF created from the original canvas/chart, and another option to download a new PDF from the hidden canvas/chart. You can see how the quality increase quite a bit when comparing both results.

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

I don't think this is the best solution, however, it is the only way I could come up to increase the quality of my PDF chart files. I'm currently playing around both libraries, specially how jsPDF treats the w and h arguments when creating the docs.

Also, Chart.js does come with a built in function to extract an image form the chart (.toBase64Image()), however, the quality seems to be worse when I tested.

这篇关于Chartjs + jsPDF =图片模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！