Flask项目Plotly绘图异常：Jinja与JavaScript语法冲突问题求助

问题根因 #

你遇到的Unexpected token '{'报错核心原因是模板中的Jinja变量占位符被错误拆分，两个连续的左大括号{{被拆成了两行单独的{，Jinja无法识别这是模板变量，直接将原始大括号符号输出到前端JS代码中，触发JS语法解析错误。另外代码中DOM元素id、class属性后多余的尾部空格，也可能导致Plotly找不到对应渲染节点。

解决方案 #

1. 修正模板语法
   将JS代码中的Jinja变量占位符合并为连续的{{和}}，不要额外换行或加多余的外层包裹符号，同时清理属性中多余的尾部空格，修正后代码如下：

{% extends "layout.html" %} {% block content %}
<div class="row p-4">
    <div class="card m-auto" style="width: 90%;" data-aos="fade-left">
        <div class="card-body">
            <div id="chart1"></div>
        </div>
    </div>
</div>

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
    var graphs1 = {{ graph1JSON | safe }};
    Plotly.plot("chart1", graphs1, {});
</script>
{% endblock %}

2. 优先使用官方推荐的传值方式
   无需在后端提前序列化JSON，直接传递Python原始数据对象，使用Jinja内置的tojson过滤器处理，避免手动序列化出现的转义错误：
   后端示例代码：

@app.route('/')
def index():
    # 直接传Python原生的图表数据对象，无需提前json.dumps
    graph1_data = [
        {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': '系列1'},
        {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': '系列2'}
    ]
    return render_template('index.html', graph1_data=graph1_data)

模板JS部分对应写法：

var graphs1 = {{ graph1_data | tojson | safe }};

3. 编辑器高亮问题无需处理
   VS Code对JS代码块内嵌的Jinja语法识别存在局限性，高亮异常属于正常现象，不会影响Flask实际渲染模板的功能。

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