12 votes

Python : Comment afficher matplotlib dans flask

Je suis très nouveau dans Flask et Matplotlib. J'aimerais pouvoir afficher un graphique simple que j'ai généré dans un fichier html, mais j'ai beaucoup de mal à trouver comment. Voici mon code 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)

Et voici mon HTML :

<!doctype html>
<html>
   <body>

      <h1>Price Chart</h1>

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

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

   </body>
</html>

36voto

Messa Points 5988

Vous pouvez générer l'image à la volée dans le gestionnaire de route URL de Flask :

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

Vous devez ensuite inclure l'image dans votre modèle HTML :

<img src="/plot.png" alt="my plot">

2voto

Ajax1234 Points 42210

Comme l'a souligné @d parolin, le chiffre généré par matplotlib devra être enregistré avant d'être rendu par le HTML. Afin de servir les images dans flask par HTML, vous allez stocker l'image dans votre flask le répertoire des fichiers :

static/
  images/
    plot.png --> store plots here
templates/

Par conséquent, dans votre application, utilisez 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')

Ensuite, en untitled1.html :

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

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X