怎么将Python可视化图表嵌入Flask或Django网页

洛溪

发布时间：2026-10-20| 7人浏览过

原创

将 Python 可视化图表嵌入 Flask 或 Django 网页，核心路径主要分为两类：一是服务端生成静态图片，通过内存缓冲（io.BytesIO）将 Matplotlib 等图表转为 Base64 编码或原生 SVG 字符串直接写入 HTML 模板；二是客户端渲染交互式图表，由后端传递数据配置（JSON 格式）或预生成的 HTML 片段，再由前端浏览器中的 Plotly.js 或 ECharts 完成矢量绘制。理解并掌握这两种路径的实现步骤与运行机制，能够帮助开发者根据实际业务需求快速搭建出稳定、高效的数据可视化 Web 应用。

一、基于 Matplotlib 的静态图表嵌入方案

Matplotlib 与 Seaborn 是数据分析中最为常用的可视化库。在 Web 框架中直接调用它们时，最常见的误区是试图通过 plt.savefig('chart.png') 先写入磁盘文件，再让 Web 框架读取静态文件。这种方式不仅增加了磁盘 I/O 负担，在多用户并发访问时还会引发文件名冲突与覆盖问题。

标准且高效的做法是：利用 Python 内置的 io.BytesIO 作为纯内存二进制流，将图表直接写入内存，再编码为 Base64 文本格式，最后作为变量传递给模板并嵌入到 <img> 标签的 src 属性中。

怎么将Python可视化图表嵌入Flask或Django网页 — 图 1：Matplotlib 静态图表通过 BytesIO 内存流与 Base64 编码嵌入 Web 页面的完整步骤

1. Flask 中的具体实现代码

在 Flask 应用中，首先在文件顶部指定无头模式 matplotlib.use('Agg')。在视图函数中构建图表，并借助 base64.b64encode 输出为 UTF-8 字符串传递给模板：

import io
import base64
import matplotlib
matplotlib.use('Agg')  # 必须在导入 pyplot 之前指定无界面后端
import matplotlib.pyplot as plt
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/chart')
def show_chart():
    # 1. 准备数据与创建画布
    x = [1, 2, 3, 4, 5]
    y = [10, 24, 18, 35, 42]
    
    fig, ax = plt.subplots(figsize=(6, 4))
    ax.plot(x, y, marker='o', color='#394957', linewidth=2)
    ax.set_title('Flask + Matplotlib 示例', fontsize=12)
    ax.set_xlabel('X 轴')
    ax.set_ylabel('Y 轴')
    ax.grid(True, linestyle='--', alpha=0.6)

    # 2. 将图表保存到内存字节流
    buf = io.BytesIO()
    fig.savefig(buf, format='png', bbox_inches='tight', dpi=100)
    buf.seek(0)
    
    # 3. 编码为 Base64 字符串
    chart_base64 = base64.b64encode(buf.getvalue()).decode('utf-8')
    
    # 4. 显式关闭图形对象，释放内存
    plt.close(fig)

    # 5. 传递给模板渲染
    return render_template('chart.html', chart_data=chart_base64)

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

对应的 Flask HTML 模板（templates/chart.html）只需包含以下标签：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>嵌入图表展示</title>
</head>
<body>
    <h2>Matplotlib 静态图表</h2>
    <img src="data:image/png;base64,{{ chart_data }}" alt="可视化图表" style="max-width:100%;height:auto;">
</body>
</html>

2. Django 中的具体实现代码

Django 的实现逻辑与 Flask 类似，只是将其置于 views.py 视图函数中，并通过 render 将上下文字典传递给 Django 模板系统：

# views.py
import io
import base64
import matplotlib
matplotlib.use('Agg')
import matplotlib.pyplot as plt
from django.shortcuts import render

def chart_view(request):
    categories = ['商品A', '商品B', '商品C', '商品D']
    values = [45, 78, 62, 90]

    fig, ax = plt.subplots(figsize=(6, 4))
    ax.bar(categories, values, color='#AD8B58')
    ax.set_title('Django + Matplotlib 柱状图', fontsize=12)

    buf = io.BytesIO()
    fig.savefig(buf, format='png', bbox_inches='tight', dpi=100)
    buf.seek(0)

    chart_base64 = base64.b64encode(buf.getvalue()).decode('utf-8')
    plt.close(fig)

    return render(request, 'reports/chart.html', {'chart_data': chart_base64})

二、基于 Plotly 的动态交互式图表嵌入方案

当业务需要图表具备数据提示框（Tooltip）、局部缩放（Zoom）、平移（Pan）及图例切换等动态交互能力时，静态图片无法满足要求。此时更优的方案是使用 Plotly。

Plotly 提供了便捷的 to_html 方法，可以直接输出只包含当前图表容器的 HTML 代码片段（<div>）和对应驱动脚本，开发者无需在前端从头编写复杂的 JavaScript 绘图逻辑。

1. Plotly 嵌入核心步骤与代码

安装依赖：pip install plotly。在视图中通过 plotly.graph_objects 或 plotly.express 构建图表后，调用 to_html 函数。重点是将 full_html 设置为 False，这样导出的只是一个包含图表 DOM 的局部片段，而非整份带有 html、head、body 的重复页面：

# Flask 示例代码
import plotly.express as px
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/interactive')
def interactive_chart():
    df = px.data.iris()  # 示例鸢尾花数据集
    fig = px.scatter(
        df, 
        x='sepal_width', 
        y='sepal_length', 
        color='species',
        title='鸢尾花花萼数据交互散点图'
    )
    
    # 生成局部 HTML 字符串，包含独立的 div 与内联驱动脚本
    # include_plotlyjs='cdn' 表示从 CDN 引用核心库，避免重复打包 3MB 的 JS 文件
    plot_div = fig.to_html(full_html=False, include_plotlyjs='cdn')
    
    return render_template('interactive.html', plot_div=plot_div)

2. 模板中的关键过滤器：防止 HTML 转义

无论是在 Flask（Jinja2）还是 Django 模板中，默认都会对变量进行 HTML 实体转义以防止 XSS 攻击。如果直接使用 {{ plot_div }}，浏览器会把代码中的 <div> 显示为字面量字符，导致图表无法正常加载。

因此必须在模板中使用 safe 过滤器通知模板引擎信任该 HTML 片段：

<!-- interactive.html 模板内容 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>交互式图表展示</title>
</head>
<body>
    <h1>数据交互看板</h1>
    <div class="chart-wrapper" style="width: 80%; margin: 0 auto;">
        <!-- Flask (Jinja2) 写法 -->
        {{ plot_div | safe }}
        
        <!-- Django 模板中写法完全一致 -->
        {# {{ plot_div|safe }} #}
    </div>
</body>
</html>

三、Flask 与 Django 实现机制差异对照

虽然底层图表生成与数据转换的 Python 代码完全通用，但 Flask 与 Django 在工程组织、模板语法细节及响应封装上存在各自的习惯。

四、生产环境关键避坑与性能优化

在本地单机开发调试时，上述代码均能顺畅运行；但在多并发、生产部署环境下，若忽视底层运行特征，容易出现服务内存撑爆、CPU 居高不下或图表加载卡顿等典型故障。以下是必须落实的优化措施：

1. 防范 Matplotlib 内存泄露（必须显式 close）

Matplotlib 默认保留对所有绘制过的 Figure 对象的全局引用。如果不执行 plt.close(fig)，即使局部变量销毁，内存中的画布依然不会被 Python 的垃圾回收机制（GC）回收。随着用户频繁刷新页面，Gunicorn 或 uWSGI 工作进程的内存占用会持续飙升，最终导致 OOM（Out of Memory）进程崩溃。

2. 规避 Base64 膨胀与高并发重绘

Base64 编码会使原始图像体积膨胀约 33%。如果每张高分辨率报表达到 2MB~5MB，频繁在 HTML 中内联传输将严重消耗服务器带宽并拖慢首屏加载。应对方案包括：

图表缓存：使用 Redis 或内存缓存（如 Flask-Caching、Django Cache），对相同参数的图表 Base64 或 HTML 片段设置过期时间（如 10 分钟），避免每次请求重复进行计算。
直接输出 SVG 文本：Matplotlib 支持 fig.savefig(buf, format='svg')，直接输出矢量 SVG 代码嵌入页面，体积更小且支持无限缩放不失真。
异步解耦：对于计算耗时超过 1 秒的大数据图表，交由 Celery 后台队列预生成，前端通过轮询或 WebSocket 获取完成状态。

五、结语与总结

将 Python 可视化图表嵌入 Flask 或 Django 网页并不是一件复杂的任务。若追求轻量开发、报告导出或固定看板，采用 Matplotlib + BytesIO + Base64 的内存转换链路是最高效且纯净的做法；若需要为用户提供缩放、下钻和悬停数据分析等现代交互体验，采用 Plotly + 局部 HTML 片段 + safe 模板过滤 则是标准范式。在实际工程落地时，始终牢记设置无头 Agg 模式、显式释放图表内存，并结合必要的缓存优化，即可构建出性能优异且稳定可靠的 Python 数据可视化 Web 应用。