本文详解如何在 Express + EJS 应用中安全、高效地将服务端数据注入前端 Google Charts，解决 ReferenceError: graphs is not defined 等常见问题，实现图表数据的动态渲染。
本文详解如何在 express + ejs 应用中安全、高效地将服务端数据注入前端 google charts，解决 `referenceerror: graphs is not defined` 等常见问题，实现图表数据的动态渲染。
在基于 Node.js 的 Web 应用中，使用 Google Charts 展示数据库驱动的仪表盘（Dashboard）时，常需将服务端准备的数据（如数组、对象）传递给前端 JavaScript，供 google.visualization 初始化图表使用。但直接在 EJS 模板中引用 graphs 变量（如 console.log(graphs)）仅在服务端渲染上下文中有效；而 <script> 中的客户端 JS 无法访问 EJS 渲染后的局部变量——这是导致 ReferenceError: graphs is not defined 的根本原因。
✅ 正确做法是：在客户端脚本中，通过 EJS 输出 JSON 字符串并赋值给一个全局 JS 变量，从而桥接服务端数据与前端图表逻辑。
✅ 正确实现步骤
1. 服务端（chart.js）保持简洁清晰
确保数据结构可序列化（避免函数、循环引用等），并通过 res.render() 传入模板：
// chart.js
const express = require('express');
const app = express();
// 示例数据（实际中可来自数据库查询）
const myData = [
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2],
['Pineapple', 12],
['Green Peppers', 22]
];
const myGraph = {
name: 'Pizza Toppings Distribution',
myData: myData
};
app.set('view engine', 'ejs');
app.set('views', './views');
app.get('/', (req, res) => {
res.render('chart', { graphs: myGraph }); // ✅ 正确传入
});
app.listen(3000, () => console.log('Server running on http://localhost:3000'));2. 前端模板（chart.ejs）安全注入数据
关键点：使用 <%- JSON.stringify(graphs) %>（注意是 <%- 而非 <%=），禁用 HTML 转义，确保生成合法 JS 对象字面量。同时建议添加 type="module" 或包裹在 DOMContentLoaded 中提升健壮性（此处为简化保留传统写法）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Google Charts + EJS Dashboard</title>
<!-- 加载 Google Charts -->
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
// ✅ 安全注入服务端数据：JSON.stringify + <%- ... %>（不转义）
const graphs = <%- JSON.stringify(graphs) %>;
// 初始化 Google Charts
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawGraph);
function drawGraph() {
// 创建容器 DOM 元素
const container = document.body;
const div = document.createElement('div');
div.id = graphs.name.replace(/\s+/g, '_'); // 安全 ID（避免空格）
div.style.width = '100%';
div.style.height = '500px';
container.appendChild(div);
// 构建 DataTable
const data = new google.visualization.DataTable();
data.addColumn('string', 'Toppings');
data.addColumn('number', 'Slices');
data.addRows(graphs.myData); // ✅ 直接使用注入的数据
// 配置与渲染
const options = {
title: graphs.name,
width: 800,
height: 400,
pieHole: 0.4,
legend: { position: 'bottom' }
};
const chart = new google.visualization.PieChart(div);
chart.draw(data, options);
}
</script>
</head>
<body>
<h1>? Pizza Analytics Dashboard</h1>
<ul>
<% graphs.myData.forEach(item => { %>
<li>I had <%= item[1] %> slice<%= item[1] !== 1 ? 's' : '' %> of <%= item[0] %> pizza</li>
<% }) %>
</ul>
</body>
</html>⚠️ 注意事项与最佳实践
- 安全第一：永远使用 <%- JSON.stringify(data) %>（非 <%= ... %>），否则特殊字符（如 "、</script>）会破坏 JS 语法，甚至引发 XSS。
-
数据验证：确保 graphs 在服务端非 undefined 或 null，可在 EJS 中加兜底：
const graphs = <%- JSON.stringify(graphs || { name: 'No Data', myData: [] }) %>; - ID 命名规范：HTML id 不允许含空格或特殊符号，建议对 graphs.name 进行清洗（如 .replace(/\s+/g, '_')）。
- 性能优化：若需渲染多个图表，可将 graphs 设计为数组（如 [{name: 'A', data: [...]}, ...]），并在 drawGraph() 中遍历创建多个 div 和 chart 实例。
- 错误处理：在 drawGraph() 中添加 try/catch 并检查 data.addRows() 输入合法性，避免因数据格式错误导致静默失败。
✅ 总结
EJS 模板本身不提供“跨执行环境变量共享”，必须显式将服务端数据序列化为客户端可解析的 JS 对象。核心技巧只有一行：
const graphs = <%- JSON.stringify(graphs) %>;
配合 Google Charts 标准初始化流程，即可实现服务端驱动、前端渲染的动态可视化仪表盘。该模式轻量、可靠，适用于 Express、Koa 等所有支持 EJS 的 Node.js 框架。
