我试着(大约一个星期!!)绘制一个图表,它完全可以与硬编码标签一起工作,但与我的标签(数据)从MySQL它只显示一个空白页。
但是,如果我使用console.log记录我的标签,它会向我显示从我的DB发送的所有数据,我想将这些数据作为标签放到我的图表中。
在我的index.js中:
router.get('/api', function (req, res) {
axios.get('http://localhost:3000/projetos/quantos/ci')
.then(dados =>{
const d = dados.data;
var labelsx = [];
for(var i = 0; i < d.length; i++){
labelsx.push(d[i].Nome);
}
console.log(labelsx);
var datax = [];
for(var j = 0; j < d.length; j++){
datax.push(d[j].QuantosHa)
}
console.log(datax);
res.render('chart',
{title: "chart",
datai: JSON.stringify(datax),
labeli: labelsx
})
})
.catch(erro => {e: erro});
});
我的图表。帕格:
extends layout
block content
script(src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js")
div
each l in labeli
ul=l
div
.chart-container
canvas#chartPic
script.
var ctx = document.getElementById("chartPic").getContext('2d');
ctx.canvas.parentNode.style.width = '50%';
var idata = #{datai};
var chart = new Chart(ctx, {
type: 'pie',
data: {
labels: [],
datasets: [{
data: idata,
backgroundColor: ['red', 'green', 'blue', 'pink', 'black'],
borderColor: ['green', 'blue', 'red', 'black', 'pink'],
borderWidth: 1
}]
},
options: {
title: {
display: true,
text: "top 5 centros com mais projetos"
},
legend: {
position: 'bottom'
}
}
});
如果我把,例如[“一”,“二”,“三”,“四”,“五”]在我的图表的标签字段,它呈现没有问题,而且“每个l在labeli”工作得很好,但每次我试图把它传递到我的图表,页面变成这样的空白:
x1c 0d1x如果我把它像它显示的哈巴狗代码,我得到的图表:
有人能帮我吗?提前感谢您的任何建议!
2条答案
按热度按时间qacovj5a1#
在index.js中,不应该将
datax
转换为string
,而只是传递原始的array
。从下面的代码块中删除JSON.stringify
。它应该如下所示。
在chart.pug中,您忘记定义
labels
。您应该将代码更改为如下所示,而不是空数组。fgw7neuy2#
现在回答这个问题可能已经太晚了,但我也面临着同样的问题,找不到任何答案。下面的步骤奏效了。
1.在发送响应之前删除JSON字符串化
1.并且Data返回到一个逗号分隔的字符串中,所以我使用String.split函数创建一个数组。