nodejs express玉mongodb项目：如何导入include chart.js

Question

我是新来的，我正在使用 Intellij 作为我的编辑器，用于带有 nodejs、mongodb、express 和jade/pug 查看引擎的项目。我需要在图表中查看我的数据并决定使用 chart.js。我已经可以在表格中访问和查看我的数据，但我想在图表中显示它。

谁能帮助我了解如何在项目中包含 chart.js 文件。我已经安装了 npm 并且它显示在我的终端中，但是我如何在项目中访问它。我尝试了不同的方法，例如像在浏览器文件中那样包含它或传递确切的目录链接，但也许我不明白这一点。请帮忙！

谢谢！

这是我拥有的文件，大部分是默认文件，我做了非常小的编辑，只是为了从远程 mongodb 获取和显示数据，我应该在哪里以及如何包含 chartjs 的东西。我尝试了 CDN 方法，但我认为我没有将链接放在正确的位置：

app.js 如下：

    var createError = require('http-errors');
    var express = require('express');
    var path = require('path');
    var cookieParser = require('cookie-parser');
    var logger = require('morgan');

    //New Code to connect remote Mongodb -Sg
    var mongo = require('mongodb');
    var monk = require('monk');
    var db = monk('username:passwd@ipaddress:27017/default', 
              {authSource:'admin'});

    var indexRouter = require('./routes/index');
    var usersRouter = require('./routes/users');

    var app = express();

    // view engine setup
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'pug');


    app.use(logger('dev'));
    app.use(express.json());
    app.use(express.urlencoded({ extended: false }));
    app.use(cookieParser());
    app.use(express.static(path.join(__dirname, 'public')));

    // Make our db accessible to our router -Sg
    app.use(function(req,res,next){
         req.db = db;
         next();
    });


     app.use('/', indexRouter);
     app.use('/users', usersRouter);

     // catch 404 and forward to error handler
     app.use(function(req, res, next) {
       next(createError(404));
     });

    // error handler
    app.use(function(err, req, res, next) {
      // set locals, only providing error in development
      res.locals.message = err.message;
      res.locals.error = req.app.get('env') === 'development' ? err : {};

      // render the error page
      res.status(err.status || 500);
      res.render('error');
    });

    module.exports = app;

index.js 如下：

    var express = require('express');
    var router = express.Router();

    /* GET home page. */
    router.get('/', function(req, res, next) {
      res.render('index', { title: 'Express' });
    });


/* GET envlist page. */
     router.get('/envlist', function(req, res) {
         var db = req.db;
         var collection = db.get('LORA_Sensor');
         collection.find({},{},function(e,docs){
            res.render('envlist', {
                 "envlist" : docs
            });
        });
     });

     module.exports = router;

envlist.pug 文件如下：

     extends layout

     block content


         h1
            Environment Parameter List

        ul
             p Co2
             each envparam, i in envlist

                li
                    p= envparam.Co2

下面是新的 envlist.pug，其中只有一个使用静态数据的图表

    extends layout

    block content

        canvas#myChart
        script.
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
           type: 'line',
           data: {
              labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
              datasets: [{
                label: 'apples',
                data: [12, 19, 3, 17, 6, 3, 7],
                backgroundColor: "rgba(153,255,51,0.4)"
            }, {
                label: 'oranges',
                data: [2, 29, 5, 5, 2, 3, 10],
                backgroundColor: "rgba(255,153,0,0.4)"
            }]
        }
    });

layout.pug：

      doctype html
       html
        head
          title= title
          link(rel='stylesheet', href='/stylesheets/style.css')
          script(src='https://cdnjs.com/libraries/Chart.js')
        body

       block content

Answer 1

尝试 CDN 方法，将其添加到 layout.pug 头部的任意位置：

script(src='https://cdnjs.com/libraries/Chart.js')

查看this question 以了解有关如何从 node_modules 将 chartjs 作为本地文件引用的更多详细信息。

CDN 更容易配置，并且也更经济，因为您的服务器不会承担为用户提供库的负载。