Node.js应用中EJS文件脚本无法运行，Chart.js图表无法展示求助

我之前也碰到过类似的坑，EJS作为模板引擎，脚本的执行时机和位置特别关键，尤其是搭配Chart.js这种需要操作DOM的库时。咱们一步步来排查解决：

Chart.js是初始化图表的基础，如果它没加载成功，后续脚本肯定跑不起来。

• 优先用CDN引入，放在你的初始化脚本之前：

  <!-- 放在<head>或者</body>前都可以，但一定要在自定义脚本前面 -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  

• 如果用本地文件，要确保Express的静态资源配置没问题：

  // Express入口文件里要加这句，指定public为静态资源目录
  app.use(express.static('public'));
  

  把Chart.js放在public/js/chart.js后，EJS里的引入路径应该是：

  <script src="/js/chart.js"></script>
  

Chart.js需要获取到<canvas>元素，如果脚本跑在DOM渲染之前，不仅找不到元素，还可能直接导致脚本中断（console.log也不会输出）。推荐两种方式：

• 最稳妥：把脚本放在</body>标签前
  此时页面所有DOM元素都已渲染完成，直接操作不会有问题：

  <body>
    <!-- 先放canvas元素 -->
    <canvas id="myChart"></canvas>
  
    <!-- 再引Chart.js和自定义脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
      console.log("脚本终于执行了！");
      const ctx = document.getElementById('myChart').getContext('2d');
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['周一', '周二', '周三'],
          datasets: [{
            label: '访问量',
            data: [120, 190, 300]
          }]
        }
      });
    </script>
  </body>
  

• 备选：用DOM加载事件包裹脚本
  如果脚本必须放在<head>里，就用DOMContentLoaded确保DOM就绪后再执行：

  document.addEventListener('DOMContentLoaded', function() {
    console.log("DOM加载完成，开始初始化图表");
    // 这里写Chart初始化代码
  });
  

如果你是从MySQL拿数据传给EJS渲染，要注意数据转义的问题，否则会导致脚本语法错误直接中断：

• Express路由里传递数据：

  app.get('/', async (req, res) => {
    // 假设db是你的MySQL连接实例
    const [data] = await db.query('SELECT * FROM chart_stats');
    res.render('index', { chartData: data });
  });
  

• EJS里正确解析数据（用<%-而不是<%=，避免JSON被转义）：

  <script>
    // 用<%- 让EJS直接输出未转义的JSON
    const chartData = <%- JSON.stringify(chartData) %>;
    console.log("从后端拿到的数据：", chartData);
    // 用chartData初始化图表
  </script>
  

  如果用<%=的话，JSON会被转义成字符串，脚本会直接报错，console.log自然不会输出。

虽然你的console.log没输出，但打开浏览器开发者工具（F12）的「Console」标签，看看有没有这些错误：

• 资源加载失败（比如Chart.js的CDN地址错了）
• 语法错误（比如动态数据转义导致的JSON格式问题）
• DOM元素找不到（比如canvas的ID写错了）
  这些错误都会直接终止脚本执行，导致console.log没机会输出。

不要直接访问http://localhost:3000/views/index.ejs，一定要通过Express的路由（比如http://localhost:3000/）访问，让Express帮你完成模板渲染，否则EJS里的脚本和变量都不会被正确处理。

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