Javascript 未使用pug/jade和nodejs渲染图表

我正在尝试（大约一周！！）呈现一个图表，它可以很好地处理硬编码标签，但是使用MySQL中的标签（数据），它只显示一个空白页面

但是，如果I console.log my labels，它会显示从数据库发送的所有数据，我希望将这些数据作为标签放到图表中

在myindex.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'
                        }
                    }
                });

例如，如果我在图表的“标签”字段中输入[“一”、“二”、“三”、“四”、“五”]，则显示时不会出现问题，而且“labeli中的每个l”都可以正常工作，但每次我尝试将其传递到图表时，页面都会出现如下空白：

如果我把它放在显示哈巴狗代码的位置，我会得到图表：

---

有人能帮我吗？提前感谢您提出的任何建议

在index.js中，不应将

datax

转换为

字符串

，而只需传递原始

数组

。从下面的代码块中删除

JSON.stringify

res.render('chart',
    { title: "chart",
      datai: JSON.stringify(datax),
      labeli: labelsx
    })

应该是这样的

res.render('chart',
    { title: "chart",
      datai: datax,
      labeli: labelsx
    })

更新

在chart.pug中，您忘记定义

标签。您应该按如下方式更改代码，而不是空数组

var chart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: #{labeli}, // <- make this change

var图表=新图表（ctx{
键入“pie”，
数据：{
labels:#{labeli}，//如果我这样做，我的图表根本不会呈现……问题不在于数据，而在于标签我已经尝试过了，但仍然不起作用。每次我尝试在脚本的任何地方插入“labeli”，图表都会变为空白。我真的不知道发生了什么