Javascript 如何在我的jsreport图表中使用自定义数据？_Javascript_Handlebars.js_Jsreport

Javascript 如何在我的jsreport图表中使用自定义数据？

javascript

Javascript 如何在我的jsreport图表中使用自定义数据？,javascript,handlebars.js,jsreport,Javascript,Handlebars.js,Jsreport,我试图在jsreport中使用自定义数据制作一些图表，并使用Chart.js，问题是我不知道如何使用自定义数据填充图表。到目前为止，我用我的数据和函数创建了一个非常大的json，用于生成图表并将其放置在画布中，但我不能用手柄在html中调用该函数，因为它说文档没有定义。那么，如何使用数据创建图表并在画布中显示呢注：我可以很容易地用静态数据显示图表，但我真的想用我创建的json来实现这一点创建图表的My函数： function graficoEstiloAdaptado(exame){

我试图在jsreport中使用自定义数据制作一些图表，并使用Chart.js，问题是我不知道如何使用自定义数据填充图表。到目前为止，我用我的数据和函数创建了一个非常大的json，用于生成图表并将其放置在画布中，但我不能用手柄在html中调用该函数，因为它说文档没有定义。那么，如何使用数据创建图表并在画布中显示呢

注：我可以很容易地用静态数据显示图表，但我真的想用我创建的json来实现这一点

创建图表的My函数：

function graficoEstiloAdaptado(exame){
    var ctx = document.getElementById('graficoEsquerdo').getContext('2d');

    var total = 280;
    var incentivador = 0;
    var idealizador = 0;
    var detalhista = 0;
    var sociavel = 0;

    for(var i=0;i<exame.respostas.length;i++){
        for(var j=0;j<exame.respostas[i].alternativas.length;j++){
            switch(exame.respostas[i].alternativas[j].categoria){
                case 'Incentivador':
                    incentivador += 4-j;
                    break;
                case 'Idealizador':
                    idealizador += 4-j;
                    break;
                case 'Detalhista':
                    detalhista += 4-j;
                    break;
                case 'Sociável':
                    sociavel += 4-j;
                    break;
            }
        }
    }

    var porcentagens = {
        incentivador: (incentivador/total).toFixed(1),
        idealizador: (idealizador/total).toFixed(1),
        detalhista: (detalhista/total).toFixed(1),
        sociavel: (sociavel/total).toFixed(1)
    };

    var chartEstiloAdaptado = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [porcentagens.incentivador + "%", porcentagens.idealizador + "%", porcentagens.detalhista + "%", porcentagens.sociavel + "%"],
            datasets: [{
                label: "Gráfico I",
                data: [
                   porcentagens.incentivador,
                   porcentagens.idealizador,
                   porcentagens.detalhista,
                   porcentagens.sociavel
                ]
            }]
        },
        options: {
            animation: {
                onComplete: function() {
                    window.JSREPORT_READY_TO_START = true;
                }
            }
        }
    });
}

函数graficoEstiloAdaptado（exame）{
var ctx=document.getElementById（'graficoEsquerdo'）.getContext（'2d'）；
var总计=280；
var incentivador=0；
var idealizador=0；
var detalhista=0；
var sociavel=0；
对于（var i=0；i而言，主要思想如下所述：
定义从参数生成JSON字符串的帮助函数
function toJSON(data) {
  return JSON.stringify(data);
}

并在内联脚本中调用此帮助程序
<script>
    var data= {{{toJSON this}}}
</script>


var data={{{{toJSON this}}}

chart.js的完整示例如下所示
<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js'></script>
  </head>
  <body>

    <canvas id='myChart' style="margin-top:30px"></canvas>

    <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
        datasets: [{
          label: 'apples',
          data: {{{toJSON A}}},
          backgroundColor: "rgba(153,255,51,0.4)"
        }, {
          label: 'oranges',
          data: {{{toJSON B}}},
          backgroundColor: "rgba(255,153,0,0.4)"
        }]
      },
      options: {
            animation: {
                onComplete: function () {
                    // set the PDF printing trigger when the animation is done
                    // to have this working, the phantom-pdf menu in the left must
                    // have the wait for printing trigger option selected
                    window.JSREPORT_READY_TO_START = true
                }
            }
        }
    });
    </script>    
  </body>
</html>


var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
标签：['M'，'T'，'W'，'T'，'F'，'S'，'S']，
数据集：[{
标签：“苹果”，
数据：{{{toJSON A}}}，
背景颜色：“rgba（153255,51,0.4）”
}, {
标签：“橙子”，
数据：{{{toJSON B}}}，
背景颜色：“rgba（255153,0,0.4）”
}]
},
选项：{
动画：{
onComplete:函数（）{
//设置动画完成时的PDF打印触发器
//要使其工作，必须使用左侧的幻影pdf菜单
//选择等待打印触发选项
window.JSREPORT\u READY\u TO\u START=true
}
}
}
});

可以找到工作操场演示。
非常感谢！