图表未在ChartJS上呈现

时间:2018-08-02 14:35:23

标签: javascript chart.js

我在服务器端有一个运行我的应用程序的Express服务器,并且正在将数据发送到前端。我正在使用猫鼬作为数据库。

我想数据发送正确,我可以在经过测试的console.log上检查它。

此刻,我只想使用一个小节来测试是否正在渲染数据。

因此,我在发送数据的路线上有以下代码:

router.get('/home', isAuthenticated, async (req, res) =>  {

    let final;
    atendimentos.find({})
        .then(atendimentos => {
            final = atendimentos.filter(atendimentos => atendimentos.status === 'F')
            res.render('home', {user: req.user, fin: final.length});
            //Funciona
            console.log(final.length)
        })
        .catch(err => console.error(err));
   })

此最终结果返回一个数组,该数组包含我从数据库中获得的数字,它返回状态为F的所有内容。

现在,来自前端ChartChar的部分:

<div id="container">
    <canvas id="myChart" width="400" height="200" </canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

<script>

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

    </script>

我遇到以下错误:

未捕获的TypeError:t.ticks.map不是一个函数,并且未捕获的TypeError:无法读取未定义的属性“ skip”。

希望我能得到一些帮助,在此先感谢!

1 个答案:

答案 0 :(得分:1)

解决了。标签字段应该是一个数组,我只放了[],现在就可以了!