[PYTHON] Anzeigen von Matplotlib-Diagrammen in einer Webanwendung

Im Moment frage ich mich, ob die JavaScript-Bibliothek coole Grafiken erstellen wird, aber ich bin mir nicht sicher, aber ich möchte trotzdem die vertraute Matplotlib in Web-Apps verwenden.

Da matplotlib jedoch mit X11 zeichnet, ist dies nicht der Fall, wenn Sie der Meinung sind, dass die Verwendung in einer Webanwendung schwierig sein kann.

Erstellen Sie Bilddaten mit AGG (Anti-Grain Geometry) für das Backend.

Dinge die zu tun sind

Zeichnen Sie das von matplotlib erstellte Diagramm mit der Kolbenwebanwendung. Der Grund für die Verwendung des Kolbens liegt darin, dass er praktisch ist. Ich denke, dass Sie dasselbe tun können, wenn Sie dasselbe tun, ohne ihn zu verwenden.

Führen Sie außerdem die folgenden zwei Muster aus.

• png Daten als Antwort zurückgeben
• Erstellen Sie eine Bilddatei als temporäre Datei

png Daten als Antwort zurückgeben

Ein Diagramm machen

Zur Zeit brauche ich ein Diagramm, um etwas anzuzeigen, also

• x-Achse: Zahlen von 1 bis 284
• y-Achse: x zufällig multipliziert mit 436-875

Ich werde eine Grafik machen.

Diese Zahlen scheinen keine tiefe Bedeutung zu haben, aber sie tun es nicht. Der Titel des Diagramms sollte "IMINASHI GRAPH" lauten.

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)

So was.

In der Web-App anzeigen

Der Verarbeitungsablauf ist wie folgt.

1. Erstellen Sie PNG-Daten für Diagramme
2. Schreiben Sie die Daten in den Puffer von cStringIO.StringIO
3. Geben Sie als Antwort Daten als Bildinhalt zurück

Vielleicht ist es schneller, sich den Code anzusehen.

@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

Wenn Sie jetzt über einen Webbrowser darauf zugreifen, wird das Bild angezeigt.

Erstellen Sie eine Bilddatei als temporäre Datei

Ein anderer ist dieser.

Der Prozess ist so.

1. Exportieren Sie Diagramme als PNG-Dateien
2. Geben Sie als Antwort eine PNG-Datei zurück
3. Löschen Sie die PNG-Datei

Das Interessante wäre 3. Angesichts des gleichzeitigen Zugriffs mehrerer Personen ist es meiner Meinung nach besser, eine zufällige Zeichenfolge für den Dateinamen zu verwenden. In diesem Fall nimmt die Anzahl der Dateien jedoch stetig zu, sodass Sie sie nach dem Anzeigen der Dateien ordnungsgemäß löschen müssen.

Verwenden Sie das gleiche Diagramm wie zuvor. Der Titel des Diagramms sollte "IMINASHI GRAPH 2" lauten.

@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')

Es gibt verschiedene Möglichkeiten, es nach dem Zurücksenden einer Antwort zu löschen. In diesem Beispiel verwenden wir den Kontextmanager, um es zu zerstören. Dies ist das Python-ähnlichste Bild.

Es wurde angezeigt. Es ist möglicherweise einfacher zu verwenden, wenn es in eine Datei umgewandelt wird.