EJS内联DOM选择器未定义
EJS内联DOM选择器未定义
提问于 2017-09-23 05:06:26
我使用Node.js、Express、Chart.js和EJS作为模板。我想要一个模板，它传递一个带有对象列表的变量。每个对象都定义了一个用于Chart.js在网页中呈现的图表。
Chart.js要求将DOM中的画布存储在变量中，该变量作为参数传递给new Chart()，但是在下面的代码中，我的EJS引用了document，它得到一个错误，在引用它时它没有定义。我怎么才能避开这一切？
<div class='report-content'>
<!-- 'reportSheet' is a variable passed in from the Express route definition. -->
<!-- for each chart object in the list of charts... -->
<% reportSheet.forEach(function(chart){ %>
<!-- create area for that chart -->
<div class="chart-region">
<div class="chart-item">
<h3>Chart Title</h3>
<canvas id="myChart" width="400" height="200"></canvas>
<% var ctx = document.getElementById("myChart"); %>
<% var myChart = new Chart(ctx, chart); %>
</div>
</div>
<% }); %>
</div>
下面是根据Chart.js文档构建图表的示例方法：
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
},
// Configuration options go here
options: {}
});
</script>
对于某些上下文:关键是用户能够查看网页并添加新图表(如仪表板)，因此数据库需要存储他们为仪表板制作的每个图表的列表。
谢谢你的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-09-29 05:05:07
好吧!在头痛之后终于想出来了。我的新手技能水平很快就会显现出来。
事件的顺序是这样的：
- 浏览器中的访问地址
- Nodejs/Express服务器使用没有图表的EJS模板进行响应
- 该EJS模板运行一个AJAX脚本。
- AJAX脚本联系人服务器以查询MongoDB中的图表数据
- 服务器从MongoDB检索图表数据并以JSON格式将其发送回AJAX脚本
- AJAX脚本接收图表数据，并使用$ string文字格式将必要的HTML和新脚本代码注入到步骤1加载的页面中。
，这是相关代码
没有图表的页面加载。页脚调用AJAX脚本：
</div>
<script src="../../public/ajax.js"></script>
</body>
</html>AJAX脚本从服务器获取图表数据并将其注入页面：
$.get("/charts", function(data){ // contacts the server route shown in code block below
data = data[1]; // only using first chart in array of charts for now
var chartData = JSON.stringify(data.chart); // 'data.chart' contains nested objects that describe the chart, so it must be stringified (this caused me days of headache)
// Now inject HTML back into original page with multi-line string literal formatting. Could also use regular string concatenation.
$(".report-content").html(
`
<div class="chart-region">
<div class="chart-item">
<h3>${data.chartName}</h3>
<canvas id="${data._id}" width='400' height='200'></canvas>
// script to create a chart
<script>
var ctx = $("#${data._id}");
var chartVar = new Chart(ctx, ${chartData});
</script>
</div>
</div>
`
);
});服务器的/charts路由如下所示：
app.get("/charts", function(req, res){
Charts.find({}, function(err, chart){
if(err){
console.log(err);
} else {
res.json(chart);
}
});
});就这样！
现在，我只注入一个图表，但是要加载整个图表数组，您必须摆脱data = data[1]并运行一个循环，如下所示(请注意，我还没有测试这段代码)：
$.get("/charts", function(data){ // data contains the entire array of chartContainers
data.forEach(function(chartContainer){ // chartContainer contains a chart's data and metadata about it like a name
var chartData = JSON.stringify(chartContainer.chart); // chartContainer.chart contains the actual chart data that Chart.js needs
$(".report-content").append(
`
<div class="chart-region">
<div class="chart-item">
<h3>${chartContainer.chartName}</h3>
<canvas id="${chartContainer._id}" width='400' height='200'></canvas>
<script>
var ctx = $("#${chartContainer._id}");
var chartVar = new Chart(ctx, ${chartData});
</script>
</div>
</div>
`
);
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46376254
复制相关文章
相似问题
腾讯云开发者
