我想从节点js(res.render('report',{result:result})获取我渲染的数据,并用它与Chart.js制作图表。我可以渲染它们,但无法打印出来从客户端javascript。请在这个主题上为我提供帮助。感谢您的宝贵时间。
<div class="item" style="width: 98%; height: 80%;">
<canvas id="myChart" style="width: 50%; height: 50%;"></canvas>
<%a=result;%>
<script type="text/javascript">
k();
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Morning', 'Afternoon', 'Night'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
options: {}
});
async function k()
{
var a = result;
console.log(a[0]['com_title']);
for (i=0;i<a.length; i++){
console.log(a[0]['com_title']);
}
}
</script>
</div>
上面的代码是我到目前为止所做的。如果执行,则可以获取数据。但我不知道如何从后端节点js到前端javascript获取数据。
尝试一下:
/****
cmd: node showChart.js
URLs:
http://localhost:3005
****/
const fs = require('fs');
var express = require('express');
var app = express();
var path = require('path');
var Chart = require('chart.js');
var result =[3,6,9];
app.get('/', function(req, res){
let _resLine = '<h1>Ereignisse: ' + result+'</h1>';
console.log('show chart:');
console.log(_resLine);
_html = "<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js'></script>"+
"<canvas id='bar-chart' width='800' height='450'></canvas>"+
"<script>"+
"var logChart = new Chart(document.getElementById('bar-chart'), {"+
"type: 'horizontalBar',"+
"data: {"+
"labels: ['Ereignis1', 'Ereignis2', 'Ereignis3'],"+
"datasets: ["+
"{"+
"label: 'Aufrufe',"+
"backgroundColor: ['#3e95cd', '#8e5ea2','#3cba9f'],"+
"data: ["+result[0]+","+result[1]+","+result[2]+"]"+
"}"+
"]"+
"},"+
"options: {"+
"legend: { display: false },"+
"title: {"+
"display: true,"+
"text: 'Ereignisse '"+
"}"+
"}"+
"});"+
"</script>";
res.send(_html);
});
app.listen(3005);
我们在这里缺少上下文。
如果a
是您的数据,并且您可以从此模板访问它,我想您可以执行以下操作:
data: {
labels: ['Morning', 'Afternoon', 'Night'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: a
}]
}