Question

我正在尝试制作一个图表，以呈现一些从数据库中获取的数据。

我有以下查询，它返回了testatm密钥，并且正在使用promise将这些数据发送到前端。我用它在我的视图上渲染了一张桌子。

const testeAtM = atendimentos.aggregate([
            {
                '$group':
                    {
                        '_id':
                            {'id_atendente': "$id_atendente", 'month': {'$month': '$date'}},
                        'sum': {'$sum': 1}
                    }
            },
            {'$sort': {'_id': 1}},
            {
                '$group': {
                    '_id': null,
                    'testatm': {'$push': '$$ROOT'}
                }
            },
        ]).exec()

我想制作一个图表，其中x轴为id_atendente，y轴具有每个id_atendente的出现次数（这是我查询的总和）

编辑1

我的承诺是这个：

Promise.all([counts, monthly, testeAt, atendData, testeEa, testeAtM]).then(([counts, monthly, testeAt, atendData, testeEa, testeAtM]) => {
            const statusData = counts[0];
            const monthlyData = monthly[0];
            const atData = testeAt[0];
            const dataAtend = atendData[0];
            const dataEa = testeEa[0];
            const atendAtM = testeAtM[0];

            //O operador spread ... reestrutura tudo em apenas um objeto
            const data = {
                ...statusData, ...monthlyData, ...atData, ...dataAtend, ...dataEa, ...atendAtM,
                user: req.user
            };
            console.log(JSON.stringify(data, null, 4));

            res.render('home', data);
        }).catch(err => next(err));

我试图做这样的事情：

var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [<%= testatm._id.id_atendente %>],
                datasets: [{
                    label: 'Gráfico de atendimento',
                    data: [<%= testatm._id.sum %>], // parâmetros do banco
                    backgroundColor: [
                        'rgb(71, 87, 112)',
                        'rgb(229, 226, 27)'
                    ],
                    borderColor: [
                        'rgb(71, 87, 112)',
                        'rgb(229, 226, 27)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });

但是没有用。我使用如下数据渲染了表格：

<% for (var i = 0; i < testatm.length; i++) { %>
<%= testatm[i]._id.id_atendente %>
                <%= testatm[i].sum %>
                <%= testatm[i]._id.month %>
        <% } %>

它有效。

我不知道为什么在图表上使用类似方法不起作用。顺便说一下，我正在使用EJS模板。

希望我能得到一些帮助！

Answer 1

我认为您正在使用错误的表达式访问数据。要在EJS模板的脚本中访问JSON数据，请执行

var myData = JSON.parse('<%- JSON.stringify(dataFromServer) %>'); //use <%- not <%=
console.log(myData)    //try logging to check if you are actually getting any data

现在您可以访问图表数据。

编辑

如果您已经分层了数据，请在使用之前将其解析为JSON

var myData = JSON.parse('<%- dataFromServer %>');

尝试在Chart.js上呈现一些数据时出现问题

1 个答案: