Javascript 带谷歌图表的Thymeleaf

我需要图表方面的帮助，我正在为一个客户做一份报告，其中将以图表的形式包含一些非常简单的信息，研究目前可用的图表，我发现谷歌图表很有趣，因为它显然很容易处理。嗯，我去了谷歌的网站，得到了HTML代码，然后把它粘贴到我为客户制作的报告中，奇怪的是，仅仅是图表中应该包含的部分的文档是空白的。搜索互联网时，我没有发现任何类似于谷歌图表在Thymeleaf中空白的问题。有人知道可能是什么吗？ 注意：仅创建一个.HTML网页时，图形将成功显示，但当插入到Thymeleaf中时，尽管转换为PDF时处于.HTML格式，但图形为空

代码：

卢克罗斯x德斯佩萨斯
桌子{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
td，th{
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：8px；
}
tr:n个孩子（偶数）{
背景色：#dddddd；
}
自动驾驶
一家名为Albaix o relatório Lucros x Despesas的公司
实用过滤器：



名称
年龄
国家
莫特祖马商业中心
张锦松
墨西哥
恩斯特·汉德尔
罗兰·孟德尔
奥地利
岛屿贸易
海伦·贝内特
英国
笑巴克斯酒窖
田纳西
加拿大
马加兹尼营养不良
乔瓦尼·罗维利
意大利
祝贺你们！！完成了

load（“当前”{packages:['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“元素”、“密度”{role:“样式”}]，
[“铜”，8.94，#b87333”]，
[“银”，10.49，“银”]，
[“黄金”，19.30，“黄金”]，
[“白金”，21.45，“颜色：#e5e4e2”]
]);
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,1，
{calc:“字符串化”，
资料来源专栏：1，
键入：“字符串”，
角色：“注释”}，
2]);
变量选项={
标题：“贵金属密度，单位为g/cm^3”，
宽度：600，
身高：400，
条：{groupWidth:“95%”，
图例：{位置：“无”}，
};
var chart=new google.visualization.ColumnChart（document.getElementById（“ColumnChart_values”）；
图表绘制（视图、选项）；
}

@编辑

我用于创建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");
    }

public ResponseEntity getPdf（LucroDespesaModel详细信息，PesquisalCroDespesaPeriodModel）抛出IOException、DocumentException、ParseException{
上下文=新上下文（）；
系统输出打印项次（详细信息）；
System.out.println（“>PDF:+details.getPeriodoPesquisa（））；
文档文档=新文档（PageSize.A4）；
DateUtil dt=new DateUtil（）；
System.out.println（“数据：+dt.getDataAtual（model.getDataInial（）））；
setVariable（“dataInicialPesquisa”，dt.getDataAtual（model.getDataInicial（））；
setVariable（“dataFinalPesquisa”，dt.getDataAtual（model.getDataFinal（））；
setVariable（“name”，details.getPeriodoPesquisa（））；
setVariable（“age”，details.getValorDespesTotal（））；
setVariable（“country”，details.getValorLucroTotal（））；
if（details.getValorDespesaTotal（）==null||
details.getValorLucroTotal（）==null
||详细信息==null | |模型==null）{
setVariable（“erroMsg”、“Nenhum valor foi encontrado dentro do período selecionado”）；
}否则{
setVariable（“erromg”，即“”）；
}
字符串htmlContentToRender=templateEngine.process（“pdf模板”，上下文）；
字符串xHtml=null；
xHtml=xHtml转换（htmlContentToRender）；
//在要发送给angular的服务调用中执行以下步骤
htmlDoc=新的StringReader（xHtml）；
ByteArrayOutputStream outputStream=新建ByteArrayOutputStream（）；
PdfWriter PdfWriter=PdfWriter.getInstance（doc，outputStream）；
doc.open（）；
XMLWorkerHelper.getInstance（）.parseXHtml（pdfWriter、doc、htmlDoc）；
addAuthor博士（“F1 Automóveis-Gênesis Desenvolvedora”）；
addCreationDate（）文件；
addCreator博士（“Sistema F1 Automóveis-Gênesis Desenvolvedora”）；
文件addKeywords（“卢克罗斯与德斯佩萨关系”）；
doc.addTitle（“Relatório Lucros x Despesas-”+dt.getDataAtual（model.getDataInicial（））+“a”
+dt.getDataAtual（model.getDataFinal（））；
doc.addProducer（）；
doc.close（）；
返回ResponseEntity.ok（）
.contentType（MediaType.parseMediaType（“应用程序/pdf”））
.header（HttpHeaders.CONTENT\u处置，“附件；文件名=\”+“下载.pdf”+“\”）
.body（新的ByteArrayResource（outputStream.toByteArray（））；
}
//服务类中的待办事项
私有字符串xhtmlConvert（字符串html）引发不受支持的编码异常{
整洁的，整洁的；
tidy.setInputEncoding（“UTF-8”）；
设置输出编码（“UTF-8”）；
tidy.setXHTML（true）；
ByteArrayInputStream inputStream=新的ByteArrayInputStream（html.getBytes（“UTF-8”）；
ByteArrayOutputStream outputStream=新建ByteArrayOutputStream（）；
parseDOM（inputStream，outputStream）；
返回outputStream.toString（“UTF-8”）；
}

你是说除了创建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");
    }