【番外編その1】FlaskでWebアプリ作成練習。Matplotlibを使ってブラウザ上にグラフ表示する。
こんにちは(@t_kun_kamakiri)
●物理の勉強
●Pythonの勉強
●Webアプリ作成
にはまっている者です( `ー´)ノ
最近、PythonのフレームワークであるFlaskを使ってWebアプリを作ろうと考えています・・・
Pythonといえば初心者でもわかりやすく、そしてめちゃくちゃ充実したライブラリが多く用意されている言語ですよね!
このnoteでは、「Flask」を使いながらPythonのMatplotlibでグラフ表示をさせる方法を紹介します。
※ネット上にあるコードを拾いながら、コードを足したりしたのでいらないライブラリをインポートしていたり、いらない記述があるかもしれません(/・ω・)/
ご了承くださいm(__)m
こちらを参考にしました。
【環境】
Python3.7.7
Windows10
Flask見習い6日目、さっそくPythonのMatplotlibを使ってブラウザ上にグラフを出力してみようと思います( `ー´)ノ
Matplotlibの詳しい記事はこちら
Matplotlibに関して詳しい記事はネット上にいっぱいあります。
【Matplotlibの公式ページ】
まずはMatplotlibの公式を見てください。
いっぱい参考コードが乗っているのでのぞいてみると楽しいですよ(^^)/
【データサイエンティストが書いている記事】
お勧めの記事はこちらです。
超わかりやすく解説しています。正直有料級なので重宝しています!
その他参考になりそうなものを載せておきます。
matplotlibの描画の基本 - figやらaxesやらがよくわからなくなった人向け
matplotlib基礎 | figureやaxesでのグラフのレイアウト
グラフをひとつ表示
run.py
from flask import Flask, render_template, make_response
from io import BytesIO
import urllib
from matplotlib.backends.backend_agg import FigureCanvasAgg
from matplotlib.figure import Figure
import matplotlib.pyplot as plt
import random
import numpy as np
app = Flask(__name__)
fig = plt.figure()
ax = fig.add_subplot()
x = np.arange(0,100,0.1)
y = x**2
@app.route('/')
def index():
plt.cla()
plt.title('Graph')
plt.legend()
plt.grid()
plt.xlabel('x')
plt.ylabel('y')
plt.plot(x, y)
canvas = FigureCanvasAgg(fig)
png_output = BytesIO()
canvas.print_png(png_output)
data = png_output.getvalue()
response = make_response(data)
response.headers['Content-Type'] = 'image/png'
return response
if __name__ == "__main__":
app.run()
●「fig 」という名前でplt.figure()クラスのインスタンス化
fig = plt.figure()
●fig.add_subplot()をaxという名前でオブジェクト作成
ax = fig.add_subplot()
●「plt」グラフを作成
plt.plot(x, y)
●「canvas」に画像を出力
canvas = FigureCanvasAgg(fig)
●画像データ「data」をレスポンス「response」で生成
data = png_output.getvalue()
data = png_output.getvalue()
バッファの全内容を含むバイト列を返す。
※バッファっていう何?って感じです(;^ω^)
●「BytesIO()」を使用して仮想的にメモリ上に書き出す
png_output = BytesIO()
簡単な説明は以上です。
では、コマンドプロンプトで実行してみましょう。
↓こんな感じでブラウザ上でグラフが表示されます。
ここからいろいろグラフ表示を試してみましょう♪
グラフを2つ表示
run1.py
from flask import Flask, render_template, make_response
from io import BytesIO
import urllib
from matplotlib.backends.backend_agg import FigureCanvasAgg
from matplotlib.figure import Figure
import matplotlib.pyplot as plt
import random
import numpy as np
app = Flask(__name__)
fig = plt.figure(figsize=[16,4])
ax1 = fig.add_subplot(1,2,1)
ax2 = fig.add_subplot(1,2,2)
x = np.arange(0,10,0.1)
y1 = x**2
y2= np.sin(x)
@app.route('/')
def index():
plt.cla()
fig.suptitle('figure title', fontsize=24)
ax1.set_title('Graph1')
ax1.grid()
ax1.set_xlabel('x',fontsize=16)
ax1.set_ylabel('y1',fontsize=16)
ax1.plot(x, y1)
ax2.set_title('Graph2')
ax2.grid()
ax2.set_xlabel('x',fontsize=16)
ax2.set_ylabel('y2',fontsize=16)
ax2.plot(x, y2)
canvas = FigureCanvasAgg(fig)
png_output = BytesIO()
canvas.print_png(png_output)
data = png_output.getvalue()
response = make_response(data)
response.headers['Content-Type'] = 'image/png'
return response
if __name__ == "__main__":
app.run()
コマンドプロンプトで実行すると↓こんな感じ
グラフを多数表示(3行3列)
2行以上のsubplotsを作る場合,axesは多次元arrayとして扱う必要があります。
run2.py
from flask import Flask, render_template, make_response
from io import BytesIO
import urllib
from matplotlib.backends.backend_agg import FigureCanvasAgg
from matplotlib.figure import Figure
import matplotlib.pyplot as plt
import random
import numpy as np
app = Flask(__name__)
fig, axes = plt.subplots(3,3,figsize=(32, 15))
x = np.arange(0,10,0.1)
y1 = x**2
y2= np.sin(x)
@app.route('/')
def index():
plt.cla()
fig.suptitle('figure title', fontsize=24)
axes[0,1].set_title('Graph1')
axes[0,1].grid()
axes[0,1].set_xlabel('x',fontsize=16)
axes[0,1].set_ylabel('y1',fontsize=16)
axes[0,1].plot(x, y1)
axes[1,2].set_title('Graph2')
axes[1,2].grid()
axes[1,2].set_xlabel('x',fontsize=16)
axes[1,2].set_ylabel('y2',fontsize=16)
axes[1,2].plot(x, y2)
canvas = FigureCanvasAgg(fig)
png_output = BytesIO()
canvas.print_png(png_output)
data = png_output.getvalue()
response = make_response(data)
response.headers['Content-Type'] = 'image/png'
return response
if __name__ == "__main__":
app.run()
コマンドプロンプトで実行すると↓こんな感じ
とりあえず、Flaskを使いながらMatplotlibでグラフを描けました。
Flaskについては、僕は☟こちらの参考書で勉強しています。
Twitter➡@t_kun_kamakiri
ブログ➡宇宙に入ったカマキリ(物理ブログ)
この記事が気に入ったらサポートをしてみませんか?