如何在 jsreport 图表中使用自定义数据?
How to use custom data in my chart on jsreport?
我正在尝试在 jsreport 中使用自定义数据制作一些图表并使用 Chart.js,问题是我不知道如何使用自定义数据来填充我的图表。到目前为止,我用我的数据创建了一个非常大的 json 和生成图表并放置在 canvas 中的函数,但我无法调用 html 中的函数handlebars 因为它说文档未定义。那么,我如何使用我的数据创建图表并将其显示在 canvas?
中
P.S.: 我可以轻松地显示带有静态数据的图表,但我真的想使用我创建的 json 来做到这一点。
我创建图表的函数:
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;
}
}
}
});
}
而且我还不想使用 API 来获取数据,我只想按照我喜欢的方式构建报告,然后使用 API 来获取数据.
本文blog描述了主要思想:
Define helper function which makes JSON string from the parameter
function toJSON(data) {
return JSON.stringify(data);
}
And call this helper in inline script
<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>
可以找到 Working playground 演示 here。
我正在尝试在 jsreport 中使用自定义数据制作一些图表并使用 Chart.js,问题是我不知道如何使用自定义数据来填充我的图表。到目前为止,我用我的数据创建了一个非常大的 json 和生成图表并放置在 canvas 中的函数,但我无法调用 html 中的函数handlebars 因为它说文档未定义。那么,我如何使用我的数据创建图表并将其显示在 canvas?
中P.S.: 我可以轻松地显示带有静态数据的图表,但我真的想使用我创建的 json 来做到这一点。
我创建图表的函数:
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;
}
}
}
});
}
而且我还不想使用 API 来获取数据,我只想按照我喜欢的方式构建报告,然后使用 API 来获取数据.
本文blog描述了主要思想:
Define helper function which makes JSON string from the parameter
function toJSON(data) { return JSON.stringify(data); }
And call this helper in inline script
<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>
可以找到 Working playground 演示 here。