Node.js+Express+Chart.js向EJS页面渲染折线图数据报错如何解决

第一步：修复后端res.render的路径错误 #

Express的res.render()方法第一个参数是视图模板的相对路径（相对于你配置的views目录），不能以斜杠开头，错误的路径会导致模板匹配异常，连带变量传递失效。
修改后端代码如下：

var a = angledata1;
// 先确认这里打印的a有值，不是undefined
console.log(a,"asd");  
// 去掉路径开头的斜杠，确保和views目录下的ejs文件名完全匹配
res.render("patientgraph", {
  angledata: a,
});

如果修复后仍报错，先确认Express的视图引擎配置正确（一般在app.js/入口文件中）：

app.set('view engine', 'ejs');
// 确保views目录路径配置正确
app.set('views', path.join(__dirname, 'views'));

第二步：优化EJS模板内的变量读取逻辑 #

你当前的写法存在冗余序列化问题，同时可以加兜底逻辑避免变量不存在直接抛错：

<script>
// 先加兜底判断，angledata不存在时默认赋值空数组
var x = <%- angledata ? JSON.stringify(angledata) : '[]' %>;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var myChart = new Chart(ctx, {
  type: 'line',
  data:{
    // x已经是JS原生数组/对象，不需要重复序列化
    labels: x,
    // 其余Chart.js代码
  }
});
</script>

第三步：排查子模板变量传递问题 #

如果你是在通过<% include %>引入的子模板中使用angledata，需要在引入时手动传递变量：

<%- include('你的子模板文件名', {angledata: angledata}) %>

快速调试方法 #

可以先在EJS的HTML部分直接打印变量，确认变量传递链路是否正常：

<div>后端传递的angledata值：<%= JSON.stringify(angledata) %></div>

如果此处能正常打印值，说明变量传递正常，问题出在script标签内的写法；如果此处也报未定义，说明问题出在后端变量传递环节。

内容的提问来源于stack exchange，提问作者fungusblacky