matplotlibは、様々なグラフを簡単に作れる一方で、webアプリにはそのまま表示できません。
今回は、Flaskでmatplotlibを表示させたい思います。
サンプルコード
このコードは、そのままコピペで使用できます。
このコードの一部は、以下のサイトから引用しています。
https://teratail.com/questions/319114
from flask import Flask, render_template
from io import BytesIO
import io
import base64
import matplotlib.pyplot as plt
import numpy as np
app = Flask(__name__)
# -----figをbase64形式に変換を関数化------
def fig_to_base64_img(fig):
io = BytesIO()
fig.savefig(io, format="png")
io.seek(0)
base64_img = base64.b64encode(io.read()).decode()
return base64_img
# -----flaskのルーティング--------
@app.route('/sample')
def sample():
fig = plt.figure()
# -----以下の点線内は自由に変更可能-------
x = np.linspace(0, 10, 100)
y = x + np.random.randn(100)
plt.plot(x, y, label="test")
# --------------------------------------
img = fig_to_base64_img(fig)
return render_template('sample.html',img=img)受ける側のhtmlは、以下のような感じです。base.htmlは省略します。
{% extends 'base.html' %}
{% block body %}
<div style="margin-left: 150px;">
<img src="data:image/png;base64,{{ img }}">
</div>
{% endblock %}解説
flask.py
- figをbase64形式に変換を関数化
- flaskのルーティング（img付き）
〇 figをbase64形式に変換を関数化
figのままでは表示できないので、今回はbase64に変換します。
# -----figをbase64形式に変換を関数化------
def fig_to_base64_img(fig):
io = BytesIO()
fig.savefig(io, format="png")
io.seek(0)
base64_img = base64.b64encode(io.read()).decode()
return base64_img〇 flaskのルーティング（img付き）
matplotlibでグラフを作成し、先ほどのfig_to_base64_imgでbase64に変換します
変換したimgを変数として、return render_templateで引き渡します。
# -----flaskのルーティング--------
@app.route('/sample')
def sample():
fig = plt.figure()
# -----以下の点線内は自由に変更可能-------
x = np.linspace(0, 10, 100)
y = x + np.random.randn(100)
plt.plot(x, y, label="test")
# --------------------------------------
img = fig_to_base64_img(fig)
return render_template('sample.html',img=img)sample.html
こちらはhtmlとcssの話なので、特に解説ないです。
{% extends 'base.html' %}
{% block body %}
<div style="margin-left: 150px;">
<img src="data:image/png;base64,{{ img }}">
</div>
{% endblock %}おまけ
グラフの表示位置の変更等はcssで、サイズの変更や軸ラベルなどは 以下のようにmatplotlib側で変更できます。
# グラフサイズの変更
fig = plt.figure(figsize=(15,6))
# X軸、Y軸のラベル
plt.xlabel('month-day',fontsize=18)
plt.ylabel("Temperature ℃",fontsize=18)
# 軸の上限下限
plt.ylim(110,120)
plt.xlim(0,120)
# 補助線
plt.grid()
# 凡例表示
plt.legend(loc='upper left',fontsize=20)関連記事
プログラミングの勉強に悩んだら、、
プログラミングの勉強に悩んだら、『Udemy』をオススメします。
オススメのポイント
・全ての講座がオンライン
・リーズナブルな価格で、実用的なスキル
・購入した講座を何度でも見直せる
・プログラミングの講座が豊富
