Chartjs + jsPDF = 模糊图像 [英] Chartjs + jsPDF = Blurry image
问题描述
我在将图表导出为 PDF 时遇到了一些问题.
I'm having some issues exporting my Charts to 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 创建图表
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);
});
当我点击 btnPrint_ 按钮时，我想将我的图表导出为 PDF
When I click the btnPrint_ Button I want to export my chart as 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 文件中完全模糊.
The problem is that my chart is totally blurry in the pdf file.
知道如何解决这个问题吗?
Any idea how to fix this?
这是我第一次使用 ChartJS 和 jsPDF，所以我可能做错了什么.
it's the first time that I'm using ChartJS and jsPDF so probably I'm doing something wrong.
谢谢！
推荐答案
分辨率来自Canvas大小.增加画布(宽度和高度)的次数越多，下载 PDF 时的分辨率就越高.
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.
但是，您可能不想过多地增加画布大小，因此，您可以使用的一个技巧是创建一个具有更高宽度和高度的隐藏画布，使用它来打印图表并创建 PDF，获得更好的 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.
这里有一个演示这个的小提琴，可以选择下载从原始画布/图表创建的 PDF，以及从隐藏的画布/图表下载新 PDF 的另一个选项.比较两个结果时，您可以看到质量如何提高很多.
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/
我不认为这是最好的解决方案，但是，这是我想出的提高 PDF 图表文件质量的唯一方法.我目前正在玩这两个库，特别是 jsPDF 在创建文档时如何处理 w 和 h 参数.
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.
此外，Chart.js 确实带有从图表中提取图像的内置函数 (.toBase64Image())，但是，当我测试时，质量似乎更差.
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屋！
