Afficher les diagrammes matplotlib dans une application Web

Pour le moment, je me demande si la bibliothèque JavaScript va créer des graphiques sympas, mais je ne suis pas sûr, mais je souhaite toujours utiliser le familier matplotlib dans les applications Web.

Cependant, puisque matplotlib dessine en utilisant X11, si vous pensez qu'il peut être difficile à utiliser dans une application Web, ce n'est pas le cas.

Créez des données d'image en utilisant AGG (Anti-Grain Geometry) pour le back-end.

Choses à faire

Dessinez le graphique créé par matplotlib avec l'application web flask. La raison d'utiliser flask est parce que c'est pratique, donc je pense que vous pouvez faire de même si vous faites la même chose sans l'utiliser.

Effectuez également les deux modèles suivants.

• png Renvoie les données en réponse
• Créez un fichier image en tant que fichier temporaire

png Renvoie les données en réponse

Faire un graphique

Pour le moment, j'ai besoin d'un graphique pour afficher quelque chose, donc

• axe des abscisses: nombres de 1 à 284
• axe y: x au hasard multiplié par 436-875

Je vais faire un graphique.

Ces chiffres ne semblent pas avoir de signification profonde, mais ils n'en ont pas. Le titre du graphique doit être "IMINASHI GRAPH".

fig, ax = matplotlib.pyplot.subplots()
ax.set_title(u'IMINASHI GRAPH')
x_ax = range(1, 284)
y_ax = [x * random.randint(436, 875) for x in x_ax]
ax.plot(x_ax, y_ax)

Comme ça.

Afficher dans l'application Web

Le flux de traitement est comme ça.

1. Créez des données png pour les graphiques
2. Ecrivez les données dans le tampon de cStringIO.StringIO
3. Renvoyer les données sous forme de contenu d'image en réponse

Peut-être que c'est plus rapide de regarder le code.

@app.route('/graph1')
def graph1():
    import matplotlib.pyplot
    from matplotlib.backends.backend_agg import FigureCanvasAgg
    import cStringIO
    import random

    fig, ax = matplotlib.pyplot.subplots()
    ax.set_title(u'IMINASHI GRAPH')
    x_ax = range(1, 284)
    y_ax = [x * random.randint(436, 875) for x in x_ax]
    ax.plot(x_ax, y_ax)

    canvas = FigureCanvasAgg(fig)
    buf = cStringIO.StringIO()
    canvas.print_png(buf)
    data = buf.getvalue()

    response = make_response(data)
    response.headers['Content-Type'] = 'image/png'
    response.headers['Content-Length'] = len(data)
    return response

Maintenant, si vous y accédez depuis un navigateur Web, l'image sera affichée.

Créer un fichier image en tant que fichier temporaire

Un autre est celui-ci.

Le processus est comme ça.

1. Exportez les graphiques sous forme de fichiers png
2. Renvoyez un fichier png en réponse
3. Supprimez le fichier png

L'intéressant serait 3. Compte tenu de l'accès simultané de plusieurs personnes, je pense qu'il est préférable d'utiliser une chaîne de caractères aléatoires pour le nom du fichier. Cependant, dans ce cas, le nombre de fichiers augmentera régulièrement, vous devez donc les supprimer correctement après avoir affiché les fichiers.

Utilisez le même graphique que précédemment. Le titre du graphique doit être "IMINASHI GRAPH 2".

@app.route('/graph2')
def graph2():
    import matplotlib.pyplot
    from matplotlib.backends.backend_agg import FigureCanvasAgg
    import random
    import string
    import os

    class TempImage(object):

        def __init__(self, file_name):
            self.file_name = file_name

        def create_png(self):
            fig, ax = matplotlib.pyplot.subplots()
            ax.set_title(u'IMINASHI GRAPH 2')
            x_ax = range(1, 284)
            y_ax = [x * random.randint(436, 875) for x in x_ax]
            ax.plot(x_ax, y_ax)

            canvas = FigureCanvasAgg(fig)
            canvas.print_figure(self.file_name)

        def __enter__(self):
            return self

        def __exit__(self, exc_type, exc_value, traceback):
            os.remove(self.file_name)

    chars = string.digits + string.letters
    img_name = ''.join(random.choice(chars) for i in xrange(64)) + '.png'

    with TempImage(img_name) as img:
        img.create_png()
        return send_file(img_name, mimetype='image/png')

Il existe plusieurs façons de le supprimer après avoir renvoyé une réponse, mais dans cet exemple, nous utilisons le gestionnaire de contexte pour le détruire. C'est l'image la plus semblable à Python.

Il a été affiché. Il peut être plus facile à utiliser s'il est transformé en fichier.