我是一个有用的助手,可以为您翻译文本。
当我点击“btnPrint_”按钮时,我希望将我的图表导出为PDF文件,就像这样。
我遇到了一些导出图表到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,可能我做错了什么。
谢谢!