个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试在 jsreport 中使用自定义数据并使用 Chart.js 制作一些图表，问题是我不知道如何使用自定义数据来填充我的图表。到目前为止，我用我的数据创建了一个非常大的 json 和生成图表并放置在 Canvas 内的函数，但我无法使用 handle 调用 html 中的函数，因为它说文档未定义。那么，我如何使用我的数据创建图表并将其显示在 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>
可以找到工作 Playground 演示 here .
关于javascript - 如何在 jsreport 的图表中使用自定义数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45122614/
25
4
0
我正在尝试使用 Express.js 和端点生成 1k 报告，我在 JSON 中传递一个数组，API 遍历它并在 forEach 循环中，然后每个对象都用于 抓取一个门户网站，获取响应，并创建一个 P
我尝试访问 jsreport api 来呈现报告模板，但收到以下错误: { body: "{"body":"\"{\\\"template\\\":{\\\"shortid\\\":\\\"B
我能够使用 JSReport 脚本通过 REST API 获取数据。我能够使用具有硬编码值的模板引擎(配方:html，引擎: Handlebars )显示饼图。现在我必须将动态数据从 JSreport
我正在使用 Dotnet Core 2.2 通过 JSReport (https://jsreport.net/) 生成报告 我使用本地 JsReport，所以我将模板和数据发送到本地服务器并取回 p
我正在尝试在 jsreport 中使用自定义数据并使用 Chart.js 制作一些图表，问题是我不知道如何使用自定义数据来填充我的图表。到目前为止，我用我的数据创建了一个非常大的 json 和生成图表
我想使用 jsreport 在我的网站(asp.net core 应用程序)上动态生成一些报告，并且我在 Controller 中有一个返回 JSON 的方法，我想使用 jsReport 从那里获取数
我想要一份在 Openlayers 的帮助下显示 map 的报告 (pdf)。遗憾的是，它似乎只能作为 html 工作，而不能与 chrome-pdf 或 phanton-pdf 一起使用。 这是我的
所以我最近开始在 linux 机器 (ubuntu 16.04) 上工作，并按照此处的安装说明进行操作 http://jsreport.net/downloads/ .当我运行 npm start -
我在执行这段代码时遇到了 Access Denied 消息: var report = await _service.RenderAsync(new RenderRequest { Temp
有没有办法设置 JsReport 使用当前应用程序文件夹来存储临时文件。不使用公共(public)文件夹 C:\Windows\Temp\jsreport？如果在普通 IIS 上运行多个应用程序，则会
我需要生成 PDF 报告，但问题是我无法用波斯语呈现，简单示例: var http = require('http'); var jsreport = require('jsreport'); htt
我正在使用 jsreport 将我的 html 文件呈现为 pdf。在这些文件中，我引用了外部 css 文件。但是貌似phantom js不喜欢，没有应用css样式。 关于如何解决此问题的任何原因或想
我正在尝试使用 jsreport 创建我的第一份报告。我已经关注了documentation ，但我无法生成最简单的 Hello world。 我已经尝试过: npm install jsreport
我正在尝试输出我的第一个简单报告，以便我可以开始使用 jsreport。这是我的代码，但它没有输出任何内容。 它在端口 8080 上运行，没有错误。当我访问本地主机 url 时，它就坐在那里。 var
我现在有一个关于 JSReport 的问题。它假设我已经有一个 API...我现在想要的是如何将它与我使用 AngularJS 的客户端链接。 如果我使用 Postman，它将返回我想要的 pdf 文
我不确定这应该归咎于什么。是 npm 有问题还是特定包已损坏或其他什么？ 我正在尝试在 Azure Ubuntu VM 上安装 JSReport，并遵循此处的简单说明 (http://jsreport
我正在尝试渲染一个包含太多数据的 jsreport，当渲染时间过长时，会显示以下消息: TaskCanceledException: a task was cancelled. 如果我加载较少的数据，
我目前正在尝试利用jsreport生成一个简单的 PDF 报告，其中包含一段时间范围内的 bpsIn 图表。目前的数据是静态的，但我遇到了一些问题: (1) 当我尝试利用 moment.js 格式化数
我可以从以下脚本中成功获取数据并显示在报告中。 function beforeRender(done){ require("request")({url:"http://nicolas.kru
我需要在背景中生成带有图像的 PDF。我使用 jsReport 生成 PDF。 我正在使用 HTML 标签图像 这很好用，因为当我在 Firefox 中打开它时，图像会显示出来。但是当我生成 PDF
我是一名优秀的程序员,十分优秀！