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

Faire un graphique

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

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.

iminashi_graph.png

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.

iminashi_graph_on_brw.png

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.

iminashi_graph_on_brw_2.png

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

Recommended Posts

Afficher les diagrammes matplotlib dans une application Web
Étapes pour développer une application Web en Python
Créer une application Web avec Flask ②
Créer une application Web pour la transcription vocale
Créer une application Web avec Django
Créer une application Web avec Flask ①
Créer une application Web avec Flask ③
Créer une application Web avec Flask ④
Comment supprimer l'erreur d'affichage dans matplotlib
Afficher une liste d'alphabets en Python 3
Affichage externe des diagrammes matplotlib à l'aide de tkinter
Afficher le graphe xy de Matplotlib avec PySimpleGUI.
[Python] Une application web rapide avec Bottle!
Afficher pyopengl dans le navigateur (python + anguille)
Exécutez une application Web Python avec Docker
J'ai essayé de comparer le cadre d'application Web
Flask-Créer un service Web avec SQLAlchemy + PostgreSQL
J'ai fait une application WEB avec Django
J'ai créé une application Web en Python qui convertit Markdown en HTML
Ce à quoi j'étais accro lors de la création d'applications Web dans un environnement Windows
[Python] Comment dessiner un histogramme avec Matplotlib
Heppoko développe un service Web en une semaine # 2 Domain Search
Ceci est un exemple d'application de fonction dans dataframe.
(Python) Essayez de développer une application Web en utilisant Django
Lancer une application Web Python sur Nginx + Gunicorn avec Docker
Comment afficher DataFrame sous forme de tableau dans Markdown
Pratique pour utiliser les sous-graphiques matplotlib dans l'instruction for
Créer un serveur Web en langage Go (net / http) (1)
Afficher un histogramme des valeurs de luminosité de l'image en python
installer des digrammes dans wsl
Comment afficher le maillage régional du Government Statistics Office (eStat) dans un navigateur Web
Afficher les images avec Matplotlib
dict in dict Transforme un dict en dict
Graphique 2D dans matplotlib
Application Web utilisant Bottle (1)
Créez une application Web qui reconnaît les nombres avec un réseau neuronal
Application pour afficher et rechercher des mémos locaux (agenda) en Python
Obtenez la page Web Python, encodez et affichez les caractères
Afficher Google Maps sur la page Web (Spring Boot + Thymeleaf)
Afficher la page Web avec FastAPI + uvicorn + Nginx (conversion SSL / HTTPS)
Une histoire sur tout, de la collecte de données au développement d'IA et à la publication d'applications Web en Python (3. développement d'IA)