Вставка и выборка значений из mongodb с использованием nodejs и chartjs - PullRequest
Новая
       12

Вставка и выборка значений из mongodb с использованием nodejs и chartjs

0 голосов
/ 03 июля 2018

Я новичок в разработке стеков MEAN. Я создал несколько диаграмм, используя chartJS, и я могу дать статические значения.

Как динамически получить значения в диаграмме из коллекций MongoDB с помощью Express.

Я разделил интерфейс и фон в две отдельные папки.

Изображение диаграммы

enter image description here

1 Ответ

0 голосов
/ 03 июля 2018

Существует два способа решения этой проблемы: -

  1. Отправка данных из вашего бэкэнда NodeJS при рендеринге соответствующего HTML (с вашей диаграммой на нем) -

    • Итак, установите экземпляр MongoDB на mLab или Atlas . Затем обратитесь к любой справке о том, как использовать 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.');
   }
});

    • Затем вам нужно добавить схему базы данных в папку моделей и экспортировать ее, чтобы вы могли получить доступ к БД из ваших маршрутов. Инструкция здесь

    • И в вашем 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 / угловых запросов для извлечения данных

    Используется много одинаковых шагов, за исключением того, что данные не будут отправлены по команде res.render. Вместо этого после загрузки страницы для запроса данных используется AJAX-запрос. Что-то вроде это . И как только вы получите данные, добавьте их в свой график таким же образом.

...