Python:如何在烧瓶中显示matplotlib

SVi*_*ill 11 python matplotlib flask

我对Flask和Matplotlib很新.我希望能够显示我在某些HTML中生成的简单图表,但我很难搞清楚如何.这是我的Python代码:

from flask import Flask, render_template
import numpy as np
import pandas
import matplotlib.pyplot as plt

app = Flask(__name__)
variables = pandas.read_csv('C:\\path\\to\\variable.csv')
price =variables['price']


@app.route('/test')
def chartTest():
    lnprice=np.log(price)
    plt.plot(lnprice)
    return render_template('untitled1.html', name = plt.show())

if __name__ == '__main__':
   app.run(debug = True)
Run Code Online (Sandbox Code Playgroud)

这是我的HTML:

<!doctype html>
<html>
   <body>

      <h1>Price Chart</h1>

      <p>{{ name }}</p>

      <img src={{ name }} alt="Chart" height="42" width="42">

   </body>
</html>
Run Code Online (Sandbox Code Playgroud)

Mes*_*ssa 32

您可以在Flask URL路由处理程序中即时生成图像:

import io
import random
from flask import Response
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib.figure import Figure

@app.route('/plot.png')
def plot_png():
    fig = create_figure()
    output = io.BytesIO()
    FigureCanvas(fig).print_png(output)
    return Response(output.getvalue(), mimetype='image/png')

def create_figure():
    fig = Figure()
    axis = fig.add_subplot(1, 1, 1)
    xs = range(100)
    ys = [random.randint(1, 50) for x in xs]
    axis.plot(xs, ys)
    return fig
Run Code Online (Sandbox Code Playgroud)

然后,您需要在HTML模板中包含图像:

<img src="/plot.png" alt="my plot">
Run Code Online (Sandbox Code Playgroud)

  • 由于浏览器缓存,这不会可靠地显示不断变化的动态绘图内容。对于重新加载时不会改变的静态图,这很好 (5认同)
  • 您可以(并且应该,如果数据是动态的)添加适当的 http 标头以禁用缓存。最终,如果您需要“实时”数据,您应该选择不同的方法——通过 websocket 将数据提供给浏览器并使用 JavaScript(d3.js 或类似的)绘制它们。 (4认同)
  • @KrisStern 这最初对我来说也不起作用,使用 Flask 2.0.1。但我将第 5 行从“from matplotlib.figure import Figure”更改为“from matplotlib import pyplot as plt”。之后,我删除了“plot_png”的第一行,并将返回之前的行更改为“FigureCanvas(plt.gcf()).print_png(output)”。像做梦一样工作。 (2认同)

Aja*_*234 6

正如@d parolin 指出的那样,生成的图形matplotlib在被 HTML 渲染之前需要保存。为了flask通过 HTML提供图像,您需要将图像存储在您的flask文件目录中:

static/
  images/
    plot.png --> store plots here
templates/
Run Code Online (Sandbox Code Playgroud)

因此,在您的应用程序中,使用plt.savefig

@app.route('/test')
def chartTest():
  lnprice=np.log(price)
  plt.plot(lnprice)   
  plt.savefig('/static/images/new_plot.png')
  return render_template('untitled1.html', name = 'new_plot', url ='/static/images/new_plot.png')
Run Code Online (Sandbox Code Playgroud)

然后在untitled1.html

  <p>{{ name }}</p>

  <img src={{ url}} alt="Chart" height="42" width="42">
Run Code Online (Sandbox Code Playgroud)

  • @mac13k 很难将代码放在这里,所以我将其作为 [GitLab 片段](https://gitlab.com/snippets/1924163) 共享。 (4认同)
  • 无需保存图像。为了在 HTML 中显示它,您可以将数据直接放入 img 标签的 src 参数中。 (2认同)

归档时间:

查看次数:

21996 次

最近记录:

7 年,3 月 前