はじめに
パラメータを変えて繰り返しグラフを描画させる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
できた！