【Streamlit】グラフ画像がダウンロードできるグラフ作成アプリ

Streamlit
この記事は約9分で読めます。

こんにちは、JS2IIUです。
データ分析や可視化において、グラフは欠かせないツールです。PythonのStreamlitとMatplotlibを使えば、インタラクティブなグラフ作成アプリを簡単に作ることができます。この記事では、StreamlitとMatplotlibを使って、複数のデータを編集・表示可能なグラフ作成アプリを作る方法を解説します。

StreamlitでMatplotlibのグラフを表示させる方法

Streamlitでアプリを作る事例として、matplotlibのグラフ表示するアプリを紹介しました。こちらの記事を参照して下さい。

pandasとmatplotlibの導入

StreamlitとMatplotlibを使うためには、まずこれらのライブラリをインストールする必要があります。Pythonのライブラリは、pipというパッケージ管理ツールを使ってインストールするのが一般的です。

ターミナルまたはコマンドプロンプトを開き、以下のコマンドを実行してください。

Bash
pip install streamlit matplotlib pandas

これで、Streamlit、Matplotlib、Pandasがインストールされます。

サンプルプログラム

今回作成するアプリのサンプルプログラムを紹介します。

Python
import streamlit as st
import matplotlib.pyplot as plt
import pandas as pd
import io

# タイトルを表示
st.title('Matplotlib Graph App')

# データを編集可能なテーブルとして表示
df = st.data_editor(pd.DataFrame({
    'x': [1, 2, 3, 4, 5],
    'y1': [10, 20, 15, 25, 30],
    'y2': [5, 15, 10, 20, 25]
}), num_rows="dynamic")

# グラフの種類を選択
chart_types = st.selectbox('Select chart type', ['Line chart', 'Scatter plot', 'Bar chart'])

# Matplotlibでグラフを作成
fig, ax = plt.subplots(figsize=(5, 3))  # figsizeでグラフサイズを指定

if 'Line chart' in chart_types:
    ax.plot(df['x'], df['y1'], label='Line chart y1')
    ax.plot(df['x'], df['y2'], label='Line chart y2')
if 'Scatter plot' in chart_types:
    ax.scatter(df['x'], df['y1'], label='Scatter plot y1')
    ax.scatter(df['x'], df['y2'], label='Scatter plot y2') 
if 'Bar chart' in chart_types:
    width1 = 0.3
    ax.bar(df['x'] - width1 / 2, df['y1'], width=width1, label='Bar chart y1')
    ax.bar(df['x'] + width1 / 2, df['y2'], width=width1, label='Bar chart y2')

# グラフのタイトル、軸ラベルなどを設定
ax.set_xlabel('X-axis')
ax.set_ylabel('Y-axis')
ax.legend()  # 凡例を表示

# グラフをpng画像としてダウンロード
fn = 'graph.png'
img = io.BytesIO()
plt.savefig(img, format='png')

btn = st.download_button(
   label="Download graph as PNG",
   data=img,
   file_name=fn,
   mime="image/png"
)

# Streamlitにグラフを表示
st.pyplot(fig)

プログラムの解説

このプログラムは、以下の手順で動作します。

  1. ライブラリのインポート: Streamlit、Matplotlib、Pandas、io の必要なライブラリをインポートします。
  2. タイトルの表示: st.title()でアプリのタイトルを表示します。
  3. データ編集: st.data_editor()を使って、PandasのDataFrameを編集可能なテーブルとして表示します。ここでは、xy1y2 の3つの列を持つDataFrameを作成し、num_rows="dynamic"を指定することで、行数を動的に変更できるようにしています。
  4. グラフの種類の選択: st.selectbox()でユーザーがグラフの種類を選択できるようにします。ここでは、’Line chart’、’Scatter plot’、’Bar chart’ の3つの選択肢から選ぶことができます。
  5. グラフの作成: Matplotlibを使ってグラフを作成します。figsize引数でグラフのサイズを指定し、選択されたグラフの種類に応じて、ax.plot()ax.scatter()ax.bar() を使い、y1 列と y2 列の両方のデータをプロットします。
    • 棒グラフの場合は、width1 変数で棒の幅を調整し、df['x'] - width1 / 2df['x'] + width1 / 2 で棒グラフを少しずらして表示することで、2つのデータ系列を並べて表示しています。
  6. グラフの装飾: ax.set_xlabel()ax.set_ylabel() で軸ラベルを設定し、ax.legend() で凡例を表示します。
  7. グラフのダウンロード: io.BytesIO() でメモリ上にバイナリデータを書き込むためのオブジェクトを作成し、 plt.savefig(img, format='png') で作成したグラフをPNG形式で img に保存します。 そして、st.download_button() を使ってダウンロードボタンを作成します。
  8. グラフの表示: st.pyplot()でMatplotlibで作成したグラフをStreamlitアプリに表示します。

各要素の詳細解説

st.data_editor()

st.data_editor()は、StreamlitでDataFrameを編集可能なテーブルとして表示するための関数です。この関数を使うことで、ユーザーは直接テーブルの値を編集し、その変更をアプリに反映させることができます。

st.selectbox()

st.selectbox()は、Streamlitでドロップダウンリストを作成するための関数です。ユーザーはリストから選択肢を選ぶことができます。ここでは、グラフの種類を選択するために使われています。

plt.subplots()

plt.subplots()は、Matplotlibでグラフを描画するための領域を作成する関数です。figsize引数でグラフのサイズを指定することができます。

ax.plot()、ax.scatter()、ax.bar()

これらの関数は、Matplotlibでそれぞれ折れ線グラフ、散布図、棒グラフを描画するための関数です。

ax.set_xlabel()、ax.set_ylabel()

これらの関数は、Matplotlibでグラフの軸ラベルを設定するための関数です。

ax.legend()

この関数は、Matplotlibでグラフの凡例を表示するための関数です。

参考になるWEBサイト

まとめ

この記事では、StreamlitとMatplotlibを使ってインタラクティブなグラフ作成アプリを作る方法を解説しました。 st.data_editor()でデータを編集可能にし、st.selectbox()でグラフの種類を選択できるようにすることで、ユーザーフレンドリーなアプリを作成することができます。 さらに、複数のデータをプロットすることで、より多様なデータ分析に対応できるアプリになります。 StreamlitとMatplotlibは、データ分析や可視化に非常に強力なツールです。ぜひ、この記事を参考に、ご自身のアプリを作成してみてください。

Pythonに関する書籍の<PR>です。

24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。

最後まで読んでいただきありがとうございました。

コメント

タイトルとURLをコピーしました