如何在 JSReport AspNetCore Razor View 中添加图表

How to add Charts in JSReport AspNetCore Razor View

我使用 JsReport AspNetCore razor 视图生成 Excel 和 PDF 报告。到目前为止,用数据生成报告还不是问题。但是,现在我必须在生成的每个报告中包含一个图表。

我尝试包含 ChartJS 来显示图表,但在呈现报告后图表没有出现在 Excel 或 PDF 文件中。我使用 Chartjs 在 Web 视图中显示图表。它不会在网络视图中造成任何问题。只是我在视图加载后调用 ajax 从 API 获取数据。当 JsReportPipeline 呈现它时,API 不会被调用。

如何解决这个问题?使用剃刀视图在报表中添加图表。

这可能是因为图表 pdf 打印在图表完全呈现之前就开始了。

对于这种情况,jsreport chrome-pdf 配方提供了 print trigger feature 可以让您推迟 pdf 打印。要从 asp.net 控制器启用它,您可以使用这个片段。

[MiddlewareFilter(typeof(JsReportPipeline))]
public async Task<IActionResult> ChartWithPrintTrigger()
{
    HttpContext.JsReportFeature()
        .Recipe(Recipe.ChromePdf)
        .Configure(cfg =>
        {
            cfg.Template.Chrome = new Chrome
            {
                WaitForJS = true
            };
        });

    return View("Chart", new { });
}

并在您的 HTML 绘制图表时调用触发器

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
       ...
    },
    options: {
        animation: {
            onComplete: function () {             
                window.JSREPORT_READY_TO_START = true
            }
        }
    }
});

可在此处找到完整示例 https://github.com/jsreport/jsreport-dotnet-aspnetcore

html-to-xlsx 配方不会将图表从源 html/js 转换为 excel。使用此配方添加 excel 的唯一方法是将生成的 excel table 插入准备好的 xlsx 模板中,该模板显示基于插入的 table.

的图表

文档是 here and an example here