我使用Google Charts API和数据库中的数据生成图表,这意味着调用外部文件,数据以JSON格式回显。我知道图表可以转换为图像,所以我认为这可能有效,但不幸的是我没有尝试过以下代码:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "getData.php?id=<?php echo $user_id; ?>';",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
hAxis: {
title: 'Audit Number'
},
vAxis: {
title: 'Gross Profit %'
}
};
var chart_div = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function () {
var imgUri = chart.getImageURI();
// do something with the image URI, like:
document.getElementById('chartImg').src = imgUri;
});
chart.draw(data, options);
}
然后我通过
调用PDF图表中的图表 $rep_table = " <html><img id='chartImg' />
当我在HTML视图中加载页面时,它会显示图表,但它仍然是交互式的,因此第一个问题肯定与图表的转换有关。
生成报告的代码可以在下面看到
$total = db::c()->query("
SELECT sum(value) FROM stocktake_allowances WHERE stocktake_id = '{$stocktake_id}' AND customer_id = '".$user_id."';")->fetchColumn(0);
$dep_qry = "SELECT
category_name AS category_name,allowance_date AS date, SUM(value) AS total_cost
FROM stocktake_allowances
";
$dep_qry .= " WHERE stocktake_id = '{$stocktake_id}' AND customer_id = '".$user_id."'
";
$dep_qry .= "
GROUP BY TRIM(UPPER(category_name))
ORDER BY category_name, allowance_date ASC";
//echo $dep_qry;
$dep_res = db::c()->query($dep_qry);
$rep_table .= " <html><img id='chartImg' /><img id='chart_div' /><br/><br/><link rel='stylesheet' href='./index/style.css' type='text/css'> <table class='st_det_rep' >
<tr>
<td style='width:80%; text-align:center; font-size:30px;'>
<img src='index/EasyCountio.png' alt='EasyCount.io' height='61' width='280'/><br/><br/><br/><br/>
<strong>Wastage Summary</strong><br/>
</td>
</tr>
</table>";
$rep_table .= "
<table id='stock_detail_report' cellspacing='0' style='margin-top:10px;'>
<tr>
<td class='top' style='width:30%;'><div class='nosplit'>Wastage Category</div></td>
<td class='top' style='width:15%;'><div class='nosplit'>Ref. No.</div></td>
<td class='top' style='width:15%;'><div class='nosplit'>Value</div></td>
</tr>";
$sum_total_cost = 0;
$sum_total_retail = 0;
$sum_total_qty = 0;
$counter = 1;
$j=0;
while ($row = $dep_res->fetch(PDO::FETCH_ASSOC))
{
$total_cost = $row['total_cost'];//$row['unit_cost_price']*$row['qty'];
$catName = $row['category_name'];
$sum_total_cost += $total_cost;
$date = date("d-M-y", strtotime($row['date']));
$tc = number_format($total_cost, 2);
if(!($j%2)) {
$cssClass = 'odd';
} else {
$cssClass = 'even';
}
$j++;
$rep_table .= "<tr>
<td style='text-align:right;'><div class='nosplit'>".$catName."</div></td>
<td style='text-align:right;'><div class='nosplit'>".$counter."</div></td>
<td style='text-align:right;'><div class='nosplit'>€".$total_cost."</div></td>
</tr>";
$counter++;
}
$stc = number_format($sum_total_cost, 2);
$rep_table .= "<tr>
<td class='bottom' colspan = '2'><div class='nosplit'>Total Wastage:</div></td>
<td class='bottom'><div class='nosplit'>€".$stc."</div></td>
</tr>
</table>";
$dompdf = new Dompdf();
$dompdf->loadHtml($rep_table);
// // (Optional) Setup the paper size and orientation
$dompdf->setPaper('A4', 'l');
// // Render the HTML as PDF
$dompdf->render();
// // Output the generated PDF to Browser
$dompdf->stream("Allowances Summary.pdf", array("Attachment" => false));
更大的问题是在报告中包含图表。当我尝试生成PDF报告时,我收到错误消息,表明标题已经发送过。我使用SO上的一个提示来找出问题所在,这就是我得到的:
/home/arturl/public_html/platform/class/class_report.php
21
对应
url: "getData.php?id=<?php echo $user_id; ?>';",
这很有意义,因为json字符串被回显,DOMPDF将其视为标题。还有其他方法可以完成这项工作吗?
答案 0 :(得分:1)
当你说...
当我在HTML视图中加载页面时,它会显示图表,但它仍然是交互式的
听起来你想要用它的图像替换图表
请参阅以下摘录...
<?php session_start(); ?>
<div class="container-fluid bg_color8">
<div class="row alignT">
<form action="login.php" method="post">
<div class="col-sm-4">
<p> <span >User Name:</span> <input type="text" name="euname" id="euname" placeholder="username"></p>
</div>
<div class="col-sm-4">
<p> <span >Password:</span> <input type="password" name="eupassword" id="eupassword" placeholder="**********"></p>
</div>
<input name="submit" type="submit" class="btn btn-info col-sm-2" value="Log In" >
<?php if (!empty($_SESSION['message'])) { ?>
<br><label id='message'><?= $_SESSION['message'] ?></label>
<?php } ?>
</form>
</div>
</div>
<?php unset($_SESSION['message']); ?>
编辑
所以我认为它应该像这样......
3页 -
html页面调用 getData.php 并绘制图表
然后当var chart_div = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function () {
chart_div.innerHTML = '<img alt="chart" src="' + chart.getImageURI() + '" />';
});
事件触发时,将图像uri通过ajax发送到 buildPDF.php
'ready'
然后在 buildPDF.php ...
google.visualization.events.addListener(chart, 'ready', function () {
var imageURI = chart.getImageURI();
chart_div.innerHTML = '<img alt="chart" src="' + imageURI + '" />';
// send chart image
$.ajax({
type: 'POST',
url: 'buildPDF.php',
data: {
'chartImage': imageURI,
},
success: function() {
console.log('image sent');
}
});
});