はじめに

パラメータを変えて繰り返しグラフを描画させるWebアプリケーションを作成している時、都度ファイル出力しながら描画するのはあまり良くないかもしれないと思い、ファイルに書き出さないでHTML内に表示する方法を探してみたら意外と簡単だったので共有してみます。

やりたいこと

以下のようなグラフをリアルタイムで表示する

環境

MacBook Pro 15-inch, 2019
Python 3.7.4
Matplotlib 3.1.1
Flask 1.1.1
Pandas 0.25.1

フォルダ構成

root/
├ app.py
└ templates/
　└ index.html

プログラム

app.py

from flask import Flask, render_template
import pandas as pd

from matplotlib.backends.backend_agg import FigureCanvasAgg
from matplotlib.figure import Figure
import io
import base64

app = Flask(__name__)

def draw(df, figsize=(15,5)):
	
	fig = Figure(figsize=figsize, facecolor='w', tight_layout=True)
	ax = fig.add_subplot(111)
	
	for col in df.columns:
	    ax.plot(df.index, df[col])
	
	canvas = FigureCanvasAgg(fig)
	s = io.BytesIO()
	canvas.print_png(s)
	
	s = "data:image/png;base64," + base64.b64encode(s.getvalue()).decode("utf-8").replace("\n", "")
	
	return s
	
@app.route("/")
def index():
    
    x = [1,2,3,4,5]
    y = [2,7,5,9,1]
    
    df = pd.DataFrame({"x":x, "y":y})
    
    return render_template("index.html",
        plot=draw(df, figsize=(10,5)),
    )
    
if __name__ == "__main__":
    app.run(host='::', port=5001, debug=True)

テンプレート

index.html

<html>
	<head>
		<title>サンプル</title>
	</head>
	<body>
		<h1>サンプル</h1>
		<img src="{{plot}}" width="100%" />
	</body>
</html>

実行

$ python app.py

できた！