如何用Express+EJS+Chart.js将服务端对象渲染为客户端图表？

核心思路：在EJS模板中正确注入服务端数据 #

服务端通过res.render传递的weights和progressDatas，需要在EJS视图中转化为客户端JavaScript可直接使用的数组，关键是用<%- JSON.stringify() %>避免HTML转义。

完整代码示例 #

1. 先在EJS页面中引入Chart.js依赖

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2. 添加图表容器

<canvas id="weightChart"></canvas>

3. 编写初始化图表的脚本

<script>
// 直接从服务端获取解析好的数组
const chartLabels = <%- JSON.stringify(progressDatas) %>;
const chartData = <%- JSON.stringify(weights) %>;

// 初始化Chart.js图表
const ctx = document.getElementById('weightChart').getContext('2d');
new Chart(ctx, {
    type: 'line', // 可按需更换为bar、pie等图表类型
    data: {
        labels: chartLabels, // 绑定字符串列表作为X轴标签
        datasets: [{
            label: '体重记录',
            data: chartData, // 绑定整数列表作为数据值
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: false, // 体重数据无需从0开始，设为false更合理
                title: {
                    display: true,
                    text: '体重'
                }
            },
            x: {
                title: {
                    display: true,
                    text: '记录日期/阶段'
                }
            }
        }
    }
});
</script>

关键注意事项 #

• 必须用<%- %>输出JSON：<%= %>会对特殊字符做HTML转义，导致数组变成带引号的字符串，无法被JS识别为数组。
• 确保服务端传递的weights是纯整数数组，progressDatas是纯字符串数组，避免混入undefined或非预期数据类型。
• 检查浏览器控制台：如果图表不显示，先排查Chart.js未加载、容器ID不匹配或数据格式错误的报错。
• 保证两个数组长度一致：如果labels和data长度不匹配，Chart.js会无法正常渲染图表。

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