Question

对此我是陌生的，并且我正在使用Intellij作为具有Node.js，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方法添加到head.section中的layout.pug中来尝试CDN方法：

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

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

CDN易于配置，并且由于服务器不承担向用户提供库服务的负担，因此CDN也更经济。

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

1 个答案: