Django中如何用Matplotlib生成地图并与JSON数据同页展示？

问题1：弹窗阻塞+404资源未找到 #

• 删掉视图里的plt.show()：这是桌面端的弹窗调用，会直接阻塞Django主线程，web场景下完全不需要，直接生成图片文件即可。
• 统一图片文件名：代码里保存的是map7d.png，但HTML引用的是map.png，把保存路径改成和HTML一致的文件名，示例：

  plt.savefig(os.path.join(settings.STATIC_ROOT, 'map.png'))  # 确保路径指向项目静态文件目录
  

• 确认静态文件配置：检查settings.py里的STATIC_ROOT、STATIC_URL是否正确，生产环境要执行python manage.py collectstatic同步静态文件，开发环境确保DEBUG=True时静态文件服务正常运行。

问题2：main thread is not in main loop 错误 #

• 切换Matplotlib到非交互式后端：在导入plt前设置后端为Agg，避免GUI线程冲突，示例：

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

• 清理Matplotlib资源：每次生成地图后调用plt.close('all')释放图形资源，防止内存泄漏和线程残留，示例：

  plt.savefig(...)
  plt.close('all')  # 关键步骤，避免资源占用
  

• 避免重复初始化：尽量把Matplotlib的配置逻辑放在项目启动阶段，不要在每次请求时重复初始化，减少线程冲突概率。

同页展示整合示例 #

视图函数 #

def earthquake_dashboard(request):
    # 1. 获取USGS JSON数据
    usgs_data = your_usgs_data_fetch_function()  # 替换成你的USGS数据获取逻辑

    # 2. 生成地震地图
    import matplotlib
    matplotlib.use('Agg')
    import matplotlib.pyplot as plt
    import pandas as pd
    import os
    from django.conf import settings

    # 读取本地CSV数据
    df = pd.read_csv('path/to/your/earthquake.csv')
    # 你的地图绘制逻辑...
    plt.figure(figsize=(10, 6))
    # 示例绘图代码（根据你的需求调整）
    plt.scatter(df.longitude, df.latitude, s=df.magnitude*5, c=df.magnitude, cmap='viridis')
    plt.colorbar(label='震级')
    plt.xlabel('经度')
    plt.ylabel('纬度')
    plt.title('全球地震分布图')

    # 保存到静态目录
    img_path = os.path.join(settings.STATIC_ROOT, 'map.png')
    plt.savefig(img_path, dpi=100)
    plt.close('all')

    # 3. 传递数据到模板
    return render(request, 'earthquake_dashboard.html', {
        'usgs_data': usgs_data,
        'map_img_url': f"{settings.STATIC_URL}map.png"
    })

模板文件（earthquake_dashboard.html） #

<h1>地震数据仪表盘</h1>
<div class="map-container">
    <h2>地震分布图</h2>
    <img src="{{ map_img_url }}" alt="地震热力地图" style="max-width: 100%;">
</div>
<div class="data-container">
    <h2>USGS实时地震数据</h2>
    <!-- 可根据需求用表格或自定义样式渲染JSON数据 -->
    <pre>{{ usgs_data|safe }}</pre>
</div>

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