我需要图表方面的帮助，好吧，我正在为一个客户做一个报告，它将以图表的形式包含一些非常简单的信息，研究目前可用的图表，我发现google图表很有趣，因为显然它很容易处理。好吧，我去了谷歌的网站，得到了html代码，然后把它粘贴到了我为客户制作的报告中，奇怪的是，仅仅是图表中应该有它的部分的文档是空白的。在网上搜索时，我没有发现任何类似于谷歌图表空白的问题。有人知道可能是什么吗？注意：仅创建一个.html网页时，图形将成功显示，但当插入到thymeleaf中时，尽管转换为pdf时处于.html中，但它是空的。
代码：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Lucros x Despesas</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h1>Automóveis </h1>
<h5>Acompanhe abaixo o relatório Lucros x Despesas</h5>
<div style="font-size: 15px;">
<b>Filtros Utilizados:</b>
<span th:text="${'Data Inicial - ' + dataInicialPesquisa}"></span>
<span th:text="${' | Data Final - ' + dataFinalPesquisa}"></span>
</div>
<p th:text="${'Name : ' + name}"></p>
<p th:text="${'Age :' + age}"></p>
<p th:text="${'Country : ' + country}"></p>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td th:text="${name}"></td>
<td th:text="${age}"></td>
<td th:text="${country}"></td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
<h4 th:text="${erroMsg}"></h4>
<p><b>Congratualations!! It's done</b></p>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
</script>
</body>
</html>@编辑
创建pdf的方法：
public ResponseEntity<ByteArrayResource> getPdf(LucroDespesaModel details, PesquisaLucroDespesaPeriodoModel model) throws IOException, DocumentException, ParseException {
Context context = new Context();
System.out.println(details);
System.out.println(">PDF: " + details.getPeriodoPesquisa());
Document doc=new Document(PageSize.A4);
DateUtil dt = new DateUtil();
System.out.println("data: " + dt.getDataAtual(model.getDataInicial()));
context.setVariable("dataInicialPesquisa",dt.getDataAtual(model.getDataInicial()));
context.setVariable("dataFinalPesquisa",dt.getDataAtual(model.getDataFinal()));
context.setVariable("name",details.getPeriodoPesquisa());
context.setVariable("age",details.getValorDespesaTotal());
context.setVariable("country",details.getValorLucroTotal());
if(details.getValorDespesaTotal() == null ||
details.getValorLucroTotal() == null
|| details == null || model == null) {
context.setVariable("erroMsg", "Nenhum valor foi encontrado dentro do período selecionado");
} else {
context.setVariable("erroMsg", "");
}
String htmlContentToRender = templateEngine.process("pdf-template", context);
String xHtml = null;
xHtml = xhtmlConvert(htmlContentToRender);
//Do the below steps in a service call this is to send to angular
htmlDoc=new StringReader(xHtml);
ByteArrayOutputStream outputStream=new ByteArrayOutputStream();
PdfWriter pdfWriter=PdfWriter.getInstance(doc,outputStream);
doc.open();
XMLWorkerHelper.getInstance().parseXHtml(pdfWriter,doc,htmlDoc);
doc.addAuthor("F1 Automóveis - Gênesis Desenvolvedora");
doc.addCreationDate();
doc.addCreator("Sistema F1 Automóveis - Gênesis Desenvolvedora");
doc.addKeywords("Relatório de Lucros x Despesas");
doc.addTitle("Relatório Lucros x Despesas - " + dt.getDataAtual(model.getDataInicial()) + " a "
+ dt.getDataAtual(model.getDataFinal()));
doc.addProducer();
doc.close();
return ResponseEntity.ok()
.contentType(MediaType.parseMediaType("application/pdf"))
.header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + "Downloads.pdf" + "\"")
.body(new ByteArrayResource(outputStream.toByteArray()));
}
//TO-DO in a service class
private String xhtmlConvert(String html) throws UnsupportedEncodingException {
Tidy tidy = new Tidy();
tidy.setInputEncoding("UTF-8");
tidy.setOutputEncoding("UTF-8");
tidy.setXHTML(true);
ByteArrayInputStream inputStream = new ByteArrayInputStream(html.getBytes("UTF-8"));
ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
tidy.parseDOM(inputStream, outputStream);
return outputStream.toString("UTF-8");
}
暂无答案！
目前还没有任何答案，快来回答吧！