Docker部署Flask应用点击按钮后Plotly图表无法渲染报错如何解决

你当前的错误本质是Plotly的渲染逻辑不匹配Web服务的运行场景：

• 本地运行时，服务端和你的浏览器在同一设备上，fig.show(renderer="browser")会直接调用你本地安装的浏览器打开生成的临时图表HTML，所以运行正常
• Docker容器内只有极简的Python运行环境，没有安装任何桌面浏览器，也没有权限直接调用容器外用户的浏览器，所以触发找不到浏览器的报错

你需要调整Plotly的输出逻辑，让服务端生成图表的HTML代码，返回给前端模板由用户本地的浏览器渲染，修改步骤如下：

1. 修改resume_parser_code.py #

将绘图函数从直接唤起浏览器改为返回图表HTML字符串：

import plotly.express as px
import plotly.io as pio

def plot_graph(df):
    colors = ["#0C3B5D", "#3EC1CD", "#EF3A4C", "#FCB94D", "#336600", "#cc2900", "#9999ff", "#b366ff"]
    fig = px.bar(df, x="Score", y="Resume", color="Skill", title="Resume Skill Score",
                template = 'presentation',
                 color_discrete_sequence = colors, orientation="h", text="Score",
                hover_data={"Score": ":.s"})
    
    fig.update_traces(texttemplate='%{text}', textposition='auto', textfont_size=12, 
                     insidetextanchor="middle", textangle=0)

    fig.update_layout(
        yaxis={'categoryorder':'total ascending', 'tickfont': {'size': 12}, "showgrid":False, "titlefont": {"size": 18}}, 
        bargap=0.2,
        margin=dict(l=150, r=50, t=70, b=100, pad=4),
        xaxis = {"showgrid": False, 'tickfont': {'size': 14}, "titlefont": {"size": 18}},
        legend = {"font": {"size": 14}}
    )
    fig.update_yaxes(tickangle=-45)
   
    # 注释掉原来的唤起浏览器逻辑，改为返回HTML字符串
    # fig.show(renderer="browser", config={"displayModeBar": True, })
    return pio.to_html(fig, config={"displayModeBar": True})

def main():
    # df是你之前生成的数据集
    return plot_graph(df)

2. 修改app.py的路由逻辑 #

将生成的图表HTML传递给前端模板：

@app.route('/vmd_timestamp')
def vmd_timestamp():
    plot_html = main()
    return render_template('vmd_timestamp.html', plot_html=plot_html)

3. 修改vmd_timestamp.html模板 #

在需要展示图表的位置插入传递过来的HTML内容，注意要加safe过滤器避免Flask自动转义HTML标签：

<!-- 其他模板内容 -->
<div class="chart-container">
    {{ plot_html|safe }}
</div>
<!-- 其他模板内容 -->

如果你需要保留本地调试时直接唤起浏览器的功能，可以增加环境变量判断：

• 在Dockerfile中增加一行ENV IN_DOCKER=1标识容器环境
• 在resume_parser_code.py中判断环境变量选择渲染逻辑：

import os
def plot_graph(df):
    # 前面的绘图逻辑不变
    if os.getenv("IN_DOCKER"):
        return pio.to_html(fig, config={"displayModeBar": True})
    else:
        fig.show(renderer="browser", config={"displayModeBar": True, })

修改完成后重新构建镜像启动容器即可正常渲染图表。

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