Я новичок в этом, и я использую 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