【番外編その１】FlaskでWebアプリ作成練習。Matplotlibを使ってブラウザ上にグラフ表示する。

こんにちは(@t_kun_kamakiri)

●物理の勉強
●Pythonの勉強
●Webアプリ作成

にはまっている者です( ｀ー´)ノ

最近、PythonのフレームワークであるFlaskを使ってWebアプリを作ろうと考えています・・・

Pythonといえば初心者でもわかりやすく、そしてめちゃくちゃ充実したライブラリが多く用意されている言語ですよね！

このnoteでは、「Flask」を使いながらPythonのMatplotlibでグラフ表示をさせる方法を紹介します。

※ネット上にあるコードを拾いながら、コードを足したりしたのでいらないライブラリをインポートしていたり、いらない記述があるかもしれません(/・ω・)/
ご了承くださいm(__)m

こちらを参考にしました。

Flask matplotlibを使ってグラフを表示する方法（JavaScriptのChart.jsを使ってグラフを描画） - ふたり暮らし

Matplotlib描画画像をFlaskによるWebアプリにてBytesIO を介して直接表示する方法 - Qiita

【環境】
Python3.7.7
Windows10

Flask見習い6日目、さっそくPythonのMatplotlibを使ってブラウザ上にグラフを出力してみようと思います( ｀ー´)ノ

Matplotlibの詳しい記事はこちら

Matplotlibに関して詳しい記事はネット上にいっぱいあります。

【Matplotlibの公式ページ】

Matplotlib — Visualization with Python

まずはMatplotlibの公式を見てください。

いっぱい参考コードが乗っているのでのぞいてみると楽しいですよ(^^)/

【データサイエンティストが書いている記事】

データサイエンスのためのPython入門21〜matplotlibのsubplotとオブジェクト指向を使って複数のグラフを並べる〜

お勧めの記事はこちらです。

超わかりやすく解説しています。正直有料級なので重宝しています！

その他参考になりそうなものを載せておきます。

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については、僕は☟こちらの参考書で勉強しています。

Pythonフレームワーク Flaskで学ぶWebアプリケーションのしくみとつくり方

Twitter➡@t_kun_kamakiri
ブログ➡宇宙に入ったカマキリ（物理ブログ）