Question

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

P.S。：我可以轻松地显示带有静态数据的图表，但我真的想使用我创建的json来做这件事。

我创建图表的功能：

connection.query("SELECT SUM(quantity) as quantity FROM report WHERE fabrika = ? ", fabrika, function(err, rows) {
          if (err) console.log(err);
          else {
            for (var i = 0; i < rows.length; i++) {
              var row = rows[i];
              var deger = JSON.stringify(row)
              console.log("**********************************");
              console.log("Possible Quantity: " + deger); //Possible Quantity: {"SUM(Quantity)":75}
              console.log("**********************************");
            }
          }
        });

我不想使用API来获取数据，我只想按照自己喜欢的方式构建报告，之后使用API来获取数据。

Answer 1

主要想法在此blog中描述：

定义辅助函数，该函数根据参数
生成JSON字符串
function toJSON(data) {
  return JSON.stringify(data);
}
在内联脚本中调用此帮助程序
<script>
    var data= {{{toJSON this}}}
</script>

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>

可以找到工作场所演示here。

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

1 个答案: