求助：ChartJS无法显示Flask通过Jinja传递的标签

我帮你搞定这个问题！ChartJS没法识别Jinja变量的核心原因是Jinja渲染的是Python列表，但ChartJS需要的是符合JavaScript语法的数组，直接照搬会出现语法兼容问题。咱们一步步来修复：

第一步：确认后端数据传递没问题 #

你的routes.py代码逻辑是对的，不过可以加个小调试步骤，确保从数据库拿到的数据是正常的：

@app.route("/graph")
def graph():
    d = Eval.query.all()
    labels = [i.date.strftime('%d.%m.%Y') for i in d]
    data = [i.bw for i in d]
    # 打印数据，确认是否正确获取（部署时可以删掉）
    print("获取的日期标签：", labels)
    print("获取的带宽数据：", data)
    return render_template('chart.html', title='Charts', labels=labels, data=data)

第二步：修复前端ChartJS初始化代码 #

你的chart.html里有两个关键问题：ChartJS库的引入不完整，以及没有正确把Jinja变量转成JS数组。以下是完整的修复代码：

{% extends "base.html" %}
{% block content %}
<canvas id="myChart" height="400" width="800"></canvas>

<!-- 完整引入ChartJS库（用最新稳定版即可） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js"></script>

<script>
// 核心：用Jinja的tojson过滤器把Python列表转成合法的JS数组
const chartLabels = {{ labels|tojson }};
const chartData = {{ data|tojson }};

// 初始化ChartJS图表
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'line', // 可根据需求换成bar、pie等类型
    data: {
        labels: chartLabels,
        datasets: [{
            label: '带宽统计',
            data: chartData,
            borderColor: 'rgba(75, 192, 192, 1)',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: '带宽值'
                }
            },
            x: {
                title: {
                    display: true,
                    text: '日期'
                }
            }
        }
    }
});
</script>
{% endblock %}

关键细节解释 #

• |tojson过滤器：这是解决问题的核心！Jinja默认渲染Python列表时，虽然看起来和JS数组一样，但如果字符串里有特殊字符（比如引号）会直接出错。tojson会自动把Python数据转成符合JS语法的格式，避免转义问题。
• 完整引入ChartJS：你之前的script标签URL不完整，必须确保库能正常加载，否则图表根本无法初始化。
• DOM加载顺序：初始化代码放在canvas元素之后，确保浏览器能找到对应的DOM节点。

如果还是没显示，打开浏览器的开发者工具（按F12），查看控制台有没有报错：比如ChartJS加载失败的404，或者语法错误，这些信息能帮你快速定位剩余问题。

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