Matplotlib非主线程启动GUI告警 生成图片无法在网页正常显示

1 核心报错原因 #

警告触发是因为Matplotlib默认加载带GUI交互的后端，Web服务的请求处理逻辑通常运行在子线程中，不允许启动GUI实例，直接生成图片就会触发警告甚至渲染失败。同时你的代码还存在语法、传参、变量名错误，也是图片无法正常在前端展示的原因。

2 分步修复方案 #

• 第一步：切换Matplotlib为无头非交互后端
  必须在导入matplotlib.pyplot之前设置后端为AGG，专门用于无GUI环境生成图片：

  import matplotlib as mpl
  mpl.use('Agg') # 必须写在import plt之前
  import matplotlib.pyplot as plt
  

• 第二步：修正代码中的逻辑错误
  1. 补充缺失的base64导入
  2. 清理绘图缓存：每次绘图结束后调用plt.close()，避免多次请求的图像叠加
  3. 修正变量名错误：原代码中循环部分变量名混淆，dataa是空列表不能直接取列，也不应该给原data追加数据
  4. 修正render传参：Django的render函数的上下文需要合并为一个字典，不能分开传两个字典
  5. 确认表单逻辑：如果你的上传表单没有提交名为data的字段，if 'data' in request.POST这个判断会导致绘图逻辑完全不执行，可根据实际业务调整
• 第三步：修正前端渲染格式
  前端展示base64编码的png图片时，需要给src补充固定前缀，模板中写法如下：

  <img src="data:image/png;base64,{{ graphic }}" alt="趋势折线图">
  

3 修正后的完整代码 #

from io import BytesIO
import base64
import numpy as np
import matplotlib as mpl
# 提前设置无头后端，解决线程警告
mpl.use('Agg')
import matplotlib.pyplot as plt
import pandas as pd
from django.shortcuts import render

def extract(request):
    if request.method == 'POST':
        if request.FILES.get('document'):
            file = request.FILES['document']
            # 表单无data字段可删除下方注释，否则绘图逻辑不会执行
            # if 'data' in request.POST:
            data = pd.read_excel(file)
            mpl.rcParams['agg.path.chunksize'] = 10000
            # 绘图逻辑
            plt.plot(data["time"], data["make"], label='male')
            plt.plot(data["time"], data["female"], label='female')
            plt.xlabel('T')
            plt.ylabel('M and F')
            plt.legend()
            # 转base64编码
            buffer = BytesIO()
            plt.savefig(buffer, format='png')
            buffer.seek(0)
            image_png = buffer.getvalue()
            buffer.close()
            plt.close() # 清空绘图缓存，避免后续请求图像叠加
            graphic = base64.b64encode(image_png).decode('utf-8')
            # 构造返回数据
            dataa = []
            for index in range(len(data["make"])):
                # 修正变量引用错误，从data中取对应列值
                dataa.append((data["male"][index], data["female"][index]))
            # 合并上下文到同一个字典
            context = {
                'data': dataa,
                'graphic': graphic
            }
            return render(request, 'bothdata.html', context)
    return render(request, 'extract.html')

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