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

Posted 2023-03-08

【中文标题】使用 nodejs 和 chartjs 从 mongodb 插入和获取值

【英文标题】：Inserting and Fetching values from mongodb using nodejs and chartjs

【发布时间】：2018-12-11 19:52:38

【问题描述】：

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

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

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

图表图片

【问题讨论】：

你知道了吗？你能分享代码吗？

【参考方案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 %>];

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

使用 AJAX/Angular 请求获取数据

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

【讨论】：

感谢您提供解决方案。我无法找到在应用程序中放置解决方案的位置和方式。

我正在使用 MongoDB Compass 并查看为 hbs 而不是 ejs