когда я go на localhost ... / Chart, я получаю диаграмму. js график для отображения с данными из mongoDB, это через res.send (`html ... et c) в моем контроллере file.however это означает, что мне нужно обновить верхний и нижний колонтитулы, так как я не знаю, как использовать include таким образом.
Если я использую render (page), а не send (html etc), который является файлом e js. для этого используются средства include для верхнего и нижнего колонтитула. что здорово.но теперь я не могу получить значения в диаграмму. js скрипт. если я передаю строку из контроллера, я могу заставить ее появиться, используя функциональность <% =%> e js, но все равно не могу получить ее в сценарии html страницы.
я что-то упустил - только начинается в этом путешествии.
app.js file
app.use(express.static('charts'))
router.js file
const chartController = require('./controllers/chartController')
router.get('/projectskills',skillsController.projectskillstest)
router.get('/Chart', chartController.chartCreator)
module.exports = router
Chart.js model file
const chartCollection = require('../db').db().collection("skills");
exports.myPromise=()=>{
return new Promise((resolve,reject)=>{
chartCollection.find({},{projection:{_id:0,skill:1,level:1}}).toArray(function(err,data){
err? reject(err)
:resolve(data);
})
})
}
chartController.js file
const Chart = require('../models/Chart')
exports.chartCreator = async function(req, res) {
var result = await Chart.myPromise()
console.log(result)
var skillLabels=result.map(function(a){return a.skill})
console.log (skillLabels)
skillLabelsA=JSON.stringify(skillLabels)
var skillLevels=result.map(function(a){return a.level})
console.log (skillLevels)
res.send(`<!doctype html> ----then add header html
then add <script> -include chart.js
data: {
labels: ${JSON.stringify(skillLabels)},
datasets: [{
label: 'Skills',
fill:false,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: ${JSON.stringify(skillLevels)}
},
then add footer html
)`
ejs file
<%- include('includes/headera') %>
<!DOCTYPE html>
<canvas id="myChart" width="800" height="400"></canvas>
<script src="..\charts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
charts.js file
var ctx = document.getElementById('myChart');
var stars = [5, 2, 1, 5, 2];
var frameworks = ['React', 'Angular', 'Vue', 'Hyperapp', 'Omi'];
var myChart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: frameworks,
datasets: [{
label: 'Skills',
fill:false,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: stars
},
{
label: 'second data set',
fill:false,
backgroundColor: 'rgb(250, 99, 132)',
borderColor: 'rgb(130, 50, 50)',
data: [2, 3, 4, 5, 2, 3]
<%- include('includes/footera') %>