我已经使用php和MySQL数据生成了Morris.js条形图。我现在想将图表导出为PDF。有没有办法做到这一点？我正在使用FPDF库，但我不知道该怎么做。
<?php
include_once("connection.php");
$chart_data = '';
$db = new dbObj();
$connString = $db->getConnstring();
$id=$_GET['id'];
$query = $connString->prepare("SELECT ID, Name, Wrongs, Rights, Percentage, Age FROM Datas WHERE ID=?");
$query->bind_param('s',$id);
$query->execute();
$result=$query->get_result();
while($row = mysqli_fetch_array($result))
{
$chart_data .= "{ ID:'".$row["ID"]."', Wrongs:".$row["Wrongs"].", Rights:".$row["Rights"]." , Age:".$row["Age"]. ", Percentage:".$row["Percentage"]."},";
}
echo $chart_data;
$chart_data = substr($chart_data, 0);
?>
<!DOCTYPE html>
<html>
<head>
<title> PHP & Mysql</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:900px;">
<h2 align="center">MySQL</h2>
<h3 align="center">Data</h3>
<br /><br />
<div id="bar-chart" data-colors="#29abe2,#ffc142,#1ab394, #FF0000, #FFFF00" ></div>
</body>
</html>
<script>
$(document).ready(function () {
var labelColor = jQuery('#bar-chart').css('color');
Morris.Bar({
element: 'bar-chart',
data:[<?php echo $chart_data; ?>],
xkey: 'ID',
ykeys: ['Rights', 'Wrongs', 'Percentage', 'Age'],
labels: ['Rights','Wrongs', 'Percentage', 'Age'],
hideHover:true,
gridTextColor: labelColor,
barColors: jQuery('#bar-chart').data('colors').split(',')
// yLabelFormat: function(y) {return y = Math.round(y);}
});
});
</script>
我使用html2canvas做到了。脚本如下。首先，我们必须在html下添加html2canvas和jspdf库。
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
添加通话按钮。
<div id="chart"></div>
<button id="save">Download</button>
然后，在Morris.Bar图表后添加此脚本
$("#save").click(function() {
html2canvas(document.getElementById('bar-chart')).then(canvas => {
var w = document.getElementById("bar-chart").offsetWidth;
var h = document.getElementById("bar-chart").offsetHeight;
var img = canvas.toDataURL("image/jpeg", 1);
var doc = new jsPDF('L', 'pt', [w, h]);
doc.addImage(img, 'JPEG', 10, 10, w, h);
doc.save('sample-file.pdf');
}).catch(function(e) {
console.log(e.message);
});
})