如何在Flask网页中显示Plotly图表？现有代码报错求助

一、后端Python代码修正要点 #

确保正确生成Plotly图表的JSON数据并通过Flask模板传递：

from flask import Flask, render_template
import plotly.graph_objects as go
import json

app = Flask(__name__)

@app.route('/')
def index():
    # 生成示例Plotly柱状图
    fig = go.Figure(data=[go.Bar(x=['A', 'B', 'C'], y=[1, 3, 2])])
    # 将图表转为标准JSON字符串，避免模板渲染时的转义冲突
    graph_json = json.dumps(fig.to_dict(), indent=2)
    return render_template('index.html', graph_json=graph_json)

if __name__ == '__main__':
    app.run(debug=True)

关键提醒：不要直接传递fig.to_json()的结果，改用fig.to_dict()再转JSON，能避免模板渲染时的转义问题。

二、前端HTML代码修正（解决JS语法报错） #

假设子模板继承自base.html，修正后代码如下：

{% extends "base.html" %}

{% block content %}
<div id="plotly-chart" style="width: 800px; height: 600px;"></div>

<script type="text/javascript">
    // 用safe过滤器保证JSON格式不被模板转义
    const graphData = {{ graph_json|safe }};
    // 初始化Plotly图表
    Plotly.newPlot('plotly-chart', graphData.data, graphData.layout);
</script>
{% endblock %}

针对三类报错的具体修复： #

• "Property assignment expected"：必须给graph_json加上|safe过滤器，否则模板会把JSON的双引号转义成"，导致JS无法识别为合法对象。
• "Declaration or statement expected"：检查JS代码的括号、分号是否完整，比如Plotly.newPlot()的参数括号是否闭合，语句末尾是否加了分号。
• "',' expected"：后端必须用json.dumps()生成标准JSON，保证数组、对象内的元素都用逗号正确分隔。如果后端传递的JSON格式错误，前端解析时必然报这个错。

三、base.html脚本引入验证 #

确认base.html的head中脚本顺序正确（D3需在Plotly之前加载）：

<head>
    <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

完成以上操作后，重启Flask服务，访问页面即可正常显示Plotly图表，JS语法报错也会消失。

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