3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

StreamlitとMatplotlibを組み合わせたグラフの作成方法

Posted at

お疲れ様です。

今日は「StreamlitとMatplotlibを組み合わせたグラフの作成方法」について部分いたします。

他のライブラリと連携して、Streamlitでより高度なグラフを作成できます。

Matplotlibは、Pythonで広く利用されているグラフ描画ライブラリです。

そのため、StreasmlitでもMatplotlibとの組み合わせ方を学んでおいた方が良いでしょう。

Matplotlibでの基本的なグラフ作成

Streamlitでは、st.pyplot関数を使用して、Matplotlibで作成したグラフを表示します。

まず、Pythonでのコードと同じようにMatplotlibを使用してグラフを作成し、plt.titleplt.xlabelplt.ylabelでグラフのタイトルや軸ラベルを設定していきましょう。

そして、st.pyplot()を呼び出すことで、Webアプリ上にグラフを表示します。

import streamlit as st
import matplotlib.pyplot as plt
import numpy as np


x = list(range(50))
y = np.random.randn(50)


plt.plot(x, y)
plt.title('Matplotlib and Streamlit')
plt.xlabel('X-axis')
plt.ylabel('Y-axis')

# Streamlitで表示
st.pyplot(plt)

上記のコードを実行すると、以下のようなグラフが出力されます。

Screenshot 2024-04-04 at 11.09.25 PM.png

いつものMatplotlibのグラフが出力できました。

ですが、Streamlitよりはデザインに優れているとは言えないため、Streamlitを用いる場合はあまり使わないかもしれません。

とはいえ、多くの方がMatplotlibに慣れているので、複数人で作業する場合は使用機会もあるでしょう。

StreamlitとMatplotlibの組み合わせ方の例

StreamlitのウィジェットとMatplotlibを組み合わせることで、ユーザーの入力に基づいてグラフを動的に変更できます。

例えば、セレクトボックスでデータのサイズを選択すると、表示されるグラフを変えることが可能です。

以下が、セレクトボックスを追加した形のグラフの出力コードになります。

import streamlit as st
import matplotlib.pyplot as plt
import numpy as np

counting = st.selectbox(
    'サンプルデータの数を選んでください',
    (50, 100, 1000))

x = list(range(counting))
y = np.random.randn(counting)

plt.plot(x, y)
plt.title('Matplotlib and Streamlit')
plt.xlabel('X-axis')
plt.ylabel('Y-axis')

# Streamlitで表示
st.pyplot(plt)

上記のコードでは、セレクトボックスで選択したものがcountingに格納され、xとyのサイズの所が入力によって変化するようになっています。

「セレクトボックスの扱い方があまりよく分からない...」という方は、【完全網羅】Streamlitでセレクトボックスを作成する方法の記事をご参照ください。

実際に、セレクトボックスで変更したグラフを横に並べて比較してみましょう。

Screenshot 2024-04-04 at 11.11.32 PM.png

上のセレクトボックスの数値を変更しただけで、グラフが変更されました。

このように、動的にグラフを変化させられるのが、Streamlitの特徴になります。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。

3
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?