如何在Django网页展示Matplotlib图形与终端输出？附实现代码

下面提供两种简单的实现方案，分别基于轻量的Flask和常用的Django框架，都能直接在网页上呈现你的可视化图形和模型评估数据。

方案一：Flask（快速上手） #

Flask是轻量级Web框架，适合快速搭建这类简单展示页面。

1. 安装依赖 #

先安装所需的包：

pip install flask matplotlib scikit-learn numpy

2. 项目结构 #

iris_web/
├── app.py
└── templates/
    └── index.html

3. 编写app.py核心代码 #

修改原有代码，将Matplotlib图形转为base64格式嵌入网页，同时整理模型评估结果：

from flask import Flask, render_template
from sklearn.datasets import load_iris
import matplotlib.pyplot as plt
from sklearn.model_selection import train_test_split
from sklearn.preprocessing import StandardScaler
from sklearn.tree import DecisionTreeClassifier
from sklearn.ensemble import RandomForestClassifier, GradientBoostingClassifier, AdaBoostClassifier
from sklearn.metrics import accuracy_score, precision_score, recall_score, f1_score
import io
import base64

app = Flask(__name__)

@app.route('/')
def show_results():
    # 加载数据并生成可视化图
    iris = load_iris()
    X = iris.data
    y = iris.target

    plt.figure(figsize=(10, 6))
    plt.scatter(X[:, 0], X[:, 1], c=y, cmap='viridis')
    plt.xlabel('Sepal Length')
    plt.ylabel('Sepal Width')
    plt.title('Iris Veri Seti')
    plt.colorbar(label='Class')

    # 将图转为base64字符串，用于网页嵌入
    img_buf = io.BytesIO()
    plt.savefig(img_buf, format='png')
    img_buf.seek(0)
    img_base64 = base64.b64encode(img_buf.getvalue()).decode('utf-8')
    plt.close()  # 关闭画布释放资源

    # 分割数据并训练模型
    X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=42)
    scaler = StandardScaler()
    X_train_scaled = scaler.fit_transform(X_train)
    X_test_scaled = scaler.transform(X_test)

    classifiers = {
        "Decision Tree": DecisionTreeClassifier(),
        "Random Forest": RandomForestClassifier(),
        "Gradient Boosting": GradientBoostingClassifier(),
        "AdaBoost": AdaBoostClassifier()
    }

    # 整理模型评估结果
    results = []
    for name, clf in classifiers.items():
        clf.fit(X_train_scaled, y_train)
        y_pred = clf.predict(X_test_scaled)
        results.append({
            'name': name,
            'accuracy': f"{accuracy_score(y_test, y_pred):.4f}",
            'precision': f"{precision_score(y_test, y_pred, average='weighted'):.4f}",
            'recall': f"{recall_score(y_test, y_pred, average='weighted'):.4f}",
            'f1': f"{f1_score(y_test, y_pred, average='weighted'):.4f}"
        })

    return render_template('index.html', img_data=img_base64, results=results)

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

4. 编写templates/index.html模板 #

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Iris Model Sonuçları</title>
    <style>
        .result-table {
            border-collapse: collapse;
            margin-top: 20px;
            width: 80%;
        }
        .result-table th, .result-table td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        .result-table th {
            background-color: #f2f2f2;
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>Iris Veri Seti Görselleştirme</h1>
    <img src="data:image/png;base64,{{ img_data }}" alt="Iris Scatter Plot">
    
    <h2>Sınıflandırma Modeli Performansı</h2>
    <table class="result-table">
        <tr>
            <th>Sınıflandırma Algoritması</th>
            <th>Accuracy</th>
            <th>Precision</th>
            <th>Recall</th>
            <th>F1 Score</th>
        </tr>
        {% for result in results %}
        <tr>
            <td>{{ result.name }}</td>
            <td>{{ result.accuracy }}</td>
            <td>{{ result.precision }}</td>
            <td>{{ result.recall }}</td>
            <td>{{ result.f1 }}</td>
        </tr>
        {% endfor %}
    </table>
</body>
</html>

5. 运行项目 #

执行python app.py，访问http://127.0.0.1:5000就能看到图形和结果。

方案二：Django（适合后续扩展） #

如果需要搭建更复杂的Web应用，Django是更合适的选择。

1. 初始化项目 #

pip install django matplotlib scikit-learn numpy
django-admin startproject iris_django
cd iris_django
python manage.py startapp iris_app

2. 配置项目 #

在iris_django/settings.py中添加iris_app到INSTALLED_APPS：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'iris_app',  # 添加这一行
]

3. 编写视图（iris_app/views.py） #

from django.shortcuts import render
from sklearn.datasets import load_iris
import matplotlib.pyplot as plt
from sklearn.model_selection import train_test_split
from sklearn.preprocessing import StandardScaler
from sklearn.tree import DecisionTreeClassifier
from sklearn.ensemble import RandomForestClassifier, GradientBoostingClassifier, AdaBoostClassifier
from sklearn.metrics import accuracy_score, precision_score, recall_score, f1_score
import io
import base64

def iris_results(request):
    # 生成可视化图形
    iris = load_iris()
    X = iris.data
    y = iris.target

    plt.figure(figsize=(10, 6))
    plt.scatter(X[:, 0], X[:, 1], c=y, cmap='viridis')
    plt.xlabel('Sepal Length')
    plt.ylabel('Sepal Width')
    plt.title('Iris Veri Seti')
    plt.colorbar(label='Class')

    img_buf = io.BytesIO()
    plt.savefig(img_buf, format='png')
    img_buf.seek(0)
    img_base64 = base64.b64encode(img_buf.getvalue()).decode('utf-8')
    plt.close()

    # 训练模型并整理结果
    X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=42)
    scaler = StandardScaler()
    X_train_scaled = scaler.fit_transform(X_train)
    X_test_scaled = scaler.transform(X_test)

    classifiers = {
        "Decision Tree": DecisionTreeClassifier(),
        "Random Forest": RandomForestClassifier(),
        "Gradient Boosting": GradientBoostingClassifier(),
        "AdaBoost": AdaBoostClassifier()
    }

    results = []
    for name, clf in classifiers.items():
        clf.fit(X_train_scaled, y_train)
        y_pred = clf.predict(X_test_scaled)
        results.append({
            'name': name,
            'accuracy': f"{accuracy_score(y_test, y_pred):.4f}",
            'precision': f"{precision_score(y_test, y_pred, average='weighted'):.4f}",
            'recall': f"{recall_score(y_test, y_pred, average='weighted'):.4f}",
            'f1': f"{f1_score(y_test, y_pred, average='weighted'):.4f}"
        })

    return render(request, 'iris_app/results.html', {'img_data': img_base64, 'results': results})

4. 配置URL #

在iris_django/urls.py中添加路由：

from django.contrib import admin
from django.urls import path
from iris_app.views import iris_results

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', iris_results, name='iris_results'),
]

5. 创建模板（iris_app/templates/iris_app/results.html） #

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Iris Model Sonuçları</title>
    <style>
        table {
            border-collapse: collapse;
            margin: 20px 0;
            width: 80%;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>Iris Veri Seti Dağılımı</h1>
    <img src="data:image/png;base64,{{ img_data }}" alt="Iris Scatter Plot">

    <h2>Sınıflandırma Modeli Performansı</h2>
    <table>
        <tr>
            <th>Algoritma Adı</th>
            <th>Accuracy</th>
            <th>Precision</th>
            <th>Recall</th>
            <th>F1 Score</th>
        </tr>
        {% for result in results %}
        <tr>
            <td>{{ result.name }}</td>
            <td>{{ result.accuracy }}</td>
            <td>{{ result.precision }}</td>
            <td>{{ result.recall }}</td>
            <td>{{ result.f1 }}</td>
        </tr>
        {% endfor %}
    </table>
</body>
</html>

6. 运行项目 #

python manage.py runserver

访问http://127.0.0.1:8000即可查看图形和模型评估结果。

内容的提问来源于stack exchange，提问作者Hüseyin Kökşen