使用 nodejs 和 chartjs 从 mongodb 插入和获取值

Question

我是 MEAN 堆栈开发的新手。我使用 chartJS 创建了几个图表，并且可以提供静态值。

如何使用 Express 从 MongoDB 集合中动态获取图表中的值。

我在两个单独的文件夹中分离了前端和后端。

图表图片

Answer 1

有两种方法可以解决这个问题：-

1. 从你的 NodeJS 后端发送数据，同时渲染相关的 HTML（上面有你的图表） --

   • 所以，在mLab 或Atlas 上设置一个MongoDB 实例。然后参考有关如何使用MongoDB Client 或Mongoose 连接到您的MongoDB 数据库的任何参考。我个人推荐使用 Mongoose。

   • 接下来，在一条路线（假设是回家路线）中，连接到您的数据库并获取图表所需的数据。 因此，假设您使用了express-generator，请在您的 app.js

     中添加类似的内容

     mongoose.connect(<your-mongodb-connection-string-here>,function(err) 
     {
        if (err) {
           console.log(err);
        } else {
           console.log('Database ready to use.');
        }
     });
     

   • 然后，您需要将数据库架构添加到模型文件夹，然后将其导出，以便您可以从路由访问数据库。指令here

   • 在您的 index.js 中添加以下内容：-

     var participant = require('../models/participants.js'); //Replace participant with the name of your created model
     
     router.get('/home', function(req, res, next) {
     
          participant.find({ username: 'starlord55' }, function(err, data) {
             if (err) throw err;
             //Write processing to extract the data that you need for your chart
     
             res.render('<name-of-your-view(ejs,jade)>',{chartData:data})
           });
     });
     

   • 现在（假设您的视图是 ejs）chartData 对象可以从您的 ejs 文件中访问，就像这样：-

     var data = [<%= chartData %>];
     

     现在，在初始化图表对象时将此数据添加到图表中。

2. 使用 AJAX/Angular 请求获取数据

   其中包含许多相同的步骤，只是不会在res.render 命令中发送数据。相反，一旦页面加载完毕，就会使用 AJAX 请求来请求数据。像this 这样的东西。获得数据后，以同样的方式将其添加到图表中。