FlaskでMatplotlibのグラフを表示する方法【サンプルコード付き】

Webアプリケーション上でグラフを動的に表示したい場合、FlaskとMatplotlibを組み合わせるのが効果的です。この記事では、Flaskアプリケーション内でMatplotlibのプロットをPNG画像としてブラウザに返す方法を、具体的な手順とサンプルコードとともにわかりやすく解説します。

実装の流れ

FlaskでMatplotlibのグラフを表示するまでの基本的な手順は以下の通りです。

• 小さなFlaskアプリケーションを作成する
• カレントディレクトリに移動し、環境変数を設定してアプリを起動する
  $ export FLASK_APP=file.py
$ flask run
• ブラウザで https://127.0.0.1:5000/print-plot/ にアクセスする
• 乱数（random）を使ってx軸・y軸用のデータポイントを生成する
• 作成した軸（axes）に対してデータポイントをプロットする
• 図をPNG形式でメモリ上に書き出す
• BytesIOオブジェクトから全内容を取得し、レスポンスとして返す

サンプルコード

import io
import numpy as np
import matplotlib.pyplot as plt
from flask import Flask, Response
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib.figure import Figure

plt.rcParams["figure.figsize"] = [7.50, 3.50]
plt.rcParams["figure.autolayout"] = True

app = Flask(__name__)

@app.route('/print-plot')
def plot_png():
    fig = Figure()
    axis = fig.add_subplot(1, 1, 1)
    xs = np.random.rand(100)
    ys = np.random.rand(100)
    axis.plot(xs, ys)
    output = io.BytesIO()
    FigureCanvas(fig).print_png(output)
    return Response(output.getvalue(), mimetype='image/png')

コードのポイント

• FigureCanvasAggは描画バックエンドとして機能し、画面表示なしで図をメモリ上のPNG画像にレンダリングできます。サーバー環境では必須のアプローチです。
• io.BytesIOを使うことで、一時ファイルを作成せずに画像データをインメモリで扱えます。
• print_png(output)でBytesIOオブジェクトにPNGデータを書き込み、getvalue()でバイナリデータを取り出します。
• 最後にmimetype='image/png'を指定したResponseとして返すことで、ブラウザが画像として正しく認識します。

実行結果

サーバーを起動してブラウザでURLにアクセスすると、ランダムに生成された100個のデータポイントからなる折れ線グラフがPNG画像として表示されます。

この手法を応用すれば、ユーザーの入力やデータベースの値に基づいて、動的に変化するグラフをWebページ上に提供することも可能になります。ダッシュボードやレポート機能の実装など、さまざまな場面で活用してみてください。