如何利用flask框架在一个页面上同时显示多个由matplotlib画的图
时间: 2023-06-24 12:06:41 浏览: 177
可以使用Matplotlib的subplots()方法在一个图形对象中创建多个子图,并将每个子图作为单独的轴对象返回。然后,使用Flask框架将每个子图渲染到HTML页面上。
以下是一个简单的示例,演示如何在Flask应用程序中同时显示两个Matplotlib图:
```
from flask import Flask, render_template
import matplotlib.pyplot as plt
import numpy as np
app = Flask(__name__)
@app.route("/")
def plot():
# 创建两个子图
fig, (ax1, ax2) = plt.subplots(1, 2)
# 在第一个子图中绘制一个简单的折线图
x = np.linspace(0, 10, 100)
y = np.sin(x)
ax1.plot(x, y)
ax1.set_title("Sine Wave")
# 在第二个子图中绘制一个简单的散点图
x = np.random.randn(100)
y = np.random.randn(100)
ax2.scatter(x, y)
ax2.set_title("Random Scatter")
# 将图形转换为HTML字符串
fig_html = mpl_to_html(fig)
# 渲染HTML模板并将图形嵌入其中
return render_template("plot.html", fig1=fig_html[0], fig2=fig_html[1])
def mpl_to_html(fig):
# 将Matplotlib图形转换为HTML字符串
# 参考:https://stackoverflow.com/a/28211973
import base64
from io import BytesIO
buf = BytesIO()
fig.savefig(buf, format="png")
buf.seek(0)
string = base64.b64encode(buf.read())
uri = "data:image/png;base64," + urllib.parse.quote(string)
html = '<img src = "{}"/>'.format(uri)
return html
if __name__ == "__main__":
app.run(debug=True)
```
在这个例子中,我们创建了一个名为plot()的路由函数,它使用Matplotlib创建两个子图。然后,我们将这些图形转换为HTML字符串,并将它们嵌入到Flask应用程序的HTML模板中。
HTML模板(plot.html)如下所示:
```
<!DOCTYPE html>
<html>
<head>
<title>Multiple Plots</title>
</head>
<body>
<h1>Multiple Plots</h1>
<div>{{ fig1 | safe }}</div>
<div>{{ fig2 | safe }}</div>
</body>
</html>
```
在这个模板中,我们使用{{ fig1 | safe }}和{{ fig2 | safe }}将图形嵌入到HTML页面中。 safe 过滤器告诉Flask框架不要对这个字符串进行转义处理。
运行这个程序后,打开http://localhost:5000/,即可看到两个图表。
阅读全文