Javascript JSReport-图表不使用动态值呈现

我能够使用JSReport脚本通过RESTAPI获取数据。我能够使用带有硬编码值的模板引擎（recipe:html，engine:handlebar）显示饼图。现在我必须将动态数据从JSreport脚本传递到模板引擎。我不知道怎么做

剧本

async function prepareDataSource() {
    const extracts = await fetchStats() . // REST API Call
   // console.log(extracts.data);
    let arr = extracts.data
     let statsbySale = d3.nest()
                .rollup(function(d) {
                    return {
                    A : d3.sum(d, function (g) { return g.a; }),
                    B : d3.sum(d, function (g) { return g.b; }),
                    C : d3.sum(d, function (g) { return g.c; }),
                    D : d3.sum(d, function (g) { return g.d; })
                };
                }).object(arr);
                console.log(JSON.stringify(statsbySale)); ==> returns ["A" : 10, "B" : 20, "C" : 30, "D" : 40]
                return (JSON.stringify(statsbySale))
}


async function beforeRender(req, res, done) {
     req.data.sales = await prepareDataSource()
     console.log(req.data.sales======>Printed the same JSON object as above
     done();
}

==================================

Template engine

<script>
    Chart.defaults.global.legend.display = false;
    new Chart(document.getElementById('myChart').getContext("2d"),            
        type: 'pie',
        data: {
             labels: ['A', 'B', 'C', 'D'],
             datasets: [{
                  backgroundColor: [
                      'green',
                      'orange',
                      'yellow',
                      'purple'
                  ]                
                  borderColor: "rgba(27,161,226,1)",
                  borderWidth: 1,
                  hoverBackgroundColor: "rgba(27,161,226,0.4)",
                  hoverBorderColor: "rgba(27,161,226,1)",
                  data: [10,20,30,40] ===>Hardcoded value
                }]
        },
        options: {
             animation: {
                 duration:            
             }
        }
});
</script>

异步函数prepareDataSource（）{ const extracts=await fetchStats（）。//REST API调用 //console.log（extracts.data）； 设arr=extracts.data 设statsbySale=d3.nest（） .汇总（功能（d）{ 返回{ A:d3.sum（d，函数（g）{返回g.A；}）， B:d3.sum（d，函数（g）{返回g.B；}）， C:d3.sum（d，函数（g）{返回g.C；}）， D:d3.sum（D，函数（g）{返回g.D；}） }; }).对象（arr）； log（JSON.stringify（statsbySale））；=>返回[“A”：10，“B”：20，“C”：30，“D”：40] 返回（JSON.stringify（statsbySale）） } 异步函数beforeRender（req、res、done）{ req.data.sales=wait prepareDataSource（） console.log（req.data.sales）===>打印了与上面相同的JSON对象 完成（）； } ================================== 模板引擎 Chart.defaults.global.legend.display=false； 新图表（document.getElementById（'myChart'）.getContext（“2d”）， 键入“pie”， 数据：{ 标签：['A'，'B'，'C'，'D']， 数据集：[{ 背景颜色：[ “绿色”， “橙色”， “黄色”， “紫色” ] 边框颜色：“rgba（27161226,1）”， 边框宽度：1， hoverBackgroundColor:“rgba（27161226,0.4）”， hoverBorderColor:“rgba（27161226,1）”， 数据：[10,20,30,40]=>硬编码值 }] }, 选项：{ 动画：{ 持续时间： } } }); 如何将脚本文件中的动态值传递到模板引擎以正确呈现图表。

可以找到解决方案

您需要使用自定义模板引擎助手序列化json数据，并将它们写入内联脚本

定义自定义辅助对象

function toJSON(data) {
  return JSON.stringify(data);
}

将数据写入内联脚本

<script>
  var data = {{{toJSON sales}}}
  ... your chart using data
</script>

var data={{{toJSON sales}}}
…使用数据创建图表