求助：Django框架中Matplotlib生成的图片无法显示

嘿，作为Django新手，你这个需求其实挺常见的，我来一步步帮你搞定！咱们把绘图逻辑和Django视图分开，这样代码更整洁也好维护。

第一步：编写独立的Matplotlib绘图工具 #

先创建一个比如叫plot_utils.py的文件，专门放绘图逻辑，避免视图代码太臃肿：

import matplotlib.pyplot as plt
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib.figure import Figure
import numpy as np

def generate_playoutcomes_plot(playdata):
    # 初始化Matplotlib的绘图对象
    fig = Figure(figsize=(8, 6))  # 设置图片尺寸，按需调整
    canvas = FigureCanvas(fig)
    ax = fig.add_subplot(111)

    # 这里根据你的playdata实际结构处理数据，给个示例逻辑
    # 假设playdata包含x轴的游戏编号和y轴的结果值
    x = playdata.get('x', np.arange(1, 11))  # 默认生成1-10的x值
    y = playdata.get('y', np.random.randint(1, 10, size=10))  # 默认随机生成y值

    # 绘制折线图，你可以换成柱状图、散点图，按需调整样式
    ax.plot(x, y, marker='o', color='#2ecc71', linewidth=2, label='游戏结果')
    ax.set_xlabel('游戏编号')
    ax.set_ylabel('结果数值')
    ax.set_title('游戏结果趋势图')
    ax.legend()
    ax.grid(alpha=0.3)  # 加个半透明网格，提升可读性

    # 将绘图结果转为Django能返回的HttpResponse对象
    response = HttpResponse(content_type='image/png')
    canvas.print_png(response)
    return response

第二步：编写Django视图 #

在你的views.py里，调用上面的绘图函数，同时处理数据展示和图片请求：

from django.shortcuts import render
from .plot_utils import generate_playoutcomes_plot
# 如果数据来自数据库，记得导入对应的模型
# from .models import PlayRecord

def play_outcomes_view(request):
    # 模拟获取playdata，实际项目中可以从数据库查询或其他来源获取
    # 示例：从数据库提取数据
    # play_records = PlayRecord.objects.all()
    # playdata = {'x': [rec.id for rec in play_records], 'y': [rec.outcome for rec in play_records]}
    playdata = {
        'x': range(1, 11),
        'y': [3, 5, 2, 7, 4, 6, 3, 8, 5, 9]
    }

    # 通过URL参数判断：如果是请求图片，直接返回绘图结果
    if request.GET.get('get_plot') == 'yes':
        return generate_playoutcomes_plot(playdata)

    # 否则返回包含数据表格和图片的页面
    context = {
        'playdata': playdata,
        # 图片URL指向当前视图，带上获取图片的参数
        'plot_image_url': f"{request.path}?get_plot=yes"
    }
    return render(request, 'play_outcomes.html', context)

第三步：编写HTML模板 #

创建模板文件play_outcomes.html，用来展示数据表格和生成的图片：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>游戏结果展示</title>
    <style>
        table { border-collapse: collapse; margin: 20px 0; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h1>游戏结果数据</h1>
    <table>
        <tr>
            <th>游戏编号</th>
            <th>结果数值</th>
        </tr>
        {% for x_val, y_val in playdata.x|zip:playdata.y %}
        <tr>
            <td>{{ x_val }}</td>
            <td>{{ y_val }}</td>
        </tr>
        {% endfor %}
    </table>

    <h2>游戏结果趋势图</h2>
    <img src="{{ plot_image_url }}" alt="游戏结果趋势图" style="max-width: 100%;">
</body>
</html>

几个实用小提示 #

• 如果用的是Django 3.1+版本，可以试试生成SVG格式的图片，清晰度更高：只需要把canvas.print_png改成canvas.print_svg，同时把content_type改成image/svg+xml。
• 一定要把绘图逻辑和视图分离，后续修改样式或数据处理时，不用动视图代码，更符合Django的MVC思想。
• 如果playdata来自数据库，记得先把查询集数据提取成列表/字典，Matplotlib没法直接使用Django的查询集对象。

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