Python环境下Plotly图表在HTML中无法显示的问题咨询

你遇到的核心问题是模板引擎自动转义了Plotly生成的HTML div内容，导致它被当成普通文本输出，而不是解析成HTML元素。下面给你两种常用的解决办法，基于常见的Python Web框架（比如Flask）场景：

方法一：在HTML模板中使用safe过滤器 #

如果你的模板用的是Jinja2（Flask默认模板引擎），它会自动转义变量中的HTML标签来防止XSS攻击。你只需要在输出图表div的变量后面加上|safe过滤器，告诉模板这个内容是安全的，可以直接渲染：

<!-- 你的HTML模板文件 -->
<div class="dashboard-container">
  {{ plot_div|safe }}
</div>

对应的app.py里生成Plotly div的代码参考：

import plotly.express as px
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def dashboard():
    # 生成Plotly图表
    df = px.data.iris()
    fig = px.scatter(df, x="sepal_width", y="sepal_length")
    # 生成仅包含图表的div（full_html=False避免生成完整HTML页面）
    plot_div = fig.to_html(full_html=False)
    # 把div传递给模板
    return render_template('dashboard.html', plot_div=plot_div)

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

方法二：在Python代码中标记内容为安全 #

你也可以在后端直接把生成的div标记为“安全HTML”，这样模板里不需要加过滤器也能正常渲染：

# app.py中导入Markup
from markupsafe import Markup

# 生成div后用Markup包装
plot_div = Markup(fig.to_html(full_html=False))
# 传递给模板
return render_template('dashboard.html', plot_div=plot_div)

然后模板里直接使用变量即可：

<div class="dashboard-container">
  {{ plot_div }}
</div>

注意事项 #

• 只有当你完全信任这个HTML内容的时候才使用这两种方法（比如这里是Plotly生成的固定格式div，没有用户输入的内容），否则可能存在XSS安全风险。
• 确认你调用fig.to_html()时用了full_html=False，这样只会生成包含图表的div，而不是完整的HTML页面，避免和你的前端页面结构冲突。

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