前回は以下の記事でテキストやグラフの表示など、Streamlitの基本的な使い方について解説しました。
今回はチェックボックス、ラジオボタン、セレクトボックスといったウィジェットの使い方について解説していきたいと思います。
普通に作るとHTML、CSS、JavaScriptやサーバーサイドの処理に何行も書かないといけない処理も、Streamlitを使うとほんの数行で書くことができて非常に便利です。
それにより、プロトタイプ・MVP(Minimum Viable Product)を作成し、ユーザに使ってもらい仮説を検証、フィードバックを受けて修正する、というのを高速で回すことができます。
是非、使い方を覚えて、素早くダッシュボードなどのWebを作成していただければと思います。
今回は前編ということで、以下のウィジェットについて紹介し、残りは次の記事でご紹介する予定です。
- ボタン
- データ・ダウンロードボタン
- チェックボックス
- ラジオボタン
- セレクトボックス
- マルチ・セレクトボックス
Streamlitのドキュメントはこちらにありますので、もっと詳細が知りたい方はこちらをご参照ください。
目次
ウィジェットの使い方
まず、必要なモジュールをインポートしておきます。
メインはstreamlitですが、データはPandasを使うのでpandasもインポートしておきます。
import streamlit as st import pandas as pd
まず、ボタンですが、st.button()でボタンを作成することができます。
labelプロパティlにボタンに表示するラベルを指定します。
すると、ボタンを押されたときにTrueが返ってくるのでそこに処理を書きます。
if st.button(label='click me!'):
st.write('Thank you')
これでclick me!と書かれたボタンが作成され、そのボタンを押すことで処理をすることができます。
非常に簡単ですね！
Callback関数なども不要です。
他にも以下のように、ボタンを複数の列として並べ、押された方を表示するというやり方です(これはPlotlyの知識もいるので、詳細は読み飛ばしていただいて大丈夫です)。
import plotly.graph_objects as go
st.header('2021年の株価推移')
col = st.columns(2)
show_default = col[0].button('デフォルト表示')
show_plotly = col[1].button('Plotlyで表示')
if show_default:
st.subheader('デフォルト表示')
st.line_chart(df[['スノーピーク', '楽天', 'トヨタ']])
elif show_plotly:
fig = go.Figure()
fig.add_traces(go.Scatter(x=df.index,
y=df['スノーピーク'],
marker_color='royalblue',
line_width=3,
name='スノーピーク')
)
fig.add_traces(go.Scatter(x=df.index,
y=df['楽天'],
line_width=3,
marker_color='lightgrey',
name='楽天')
)
fig.add_traces(go.Scatter(x=df.index,
y=df['トヨタ'],
line_width=3,
marker_color='tan',
name='トヨタ')
)
fig.update_layout(plot_bgcolor='white',
margin=dict(t=10, l=10),
legend=dict(x=0.02, y=0.9,
orientation='h'),
xaxis=dict(tickfont_color='grey',
showline=True,
linewidth=1,
linecolor='lightgrey'),
yaxis=dict(tickfont_color='grey',
showline=True,
linewidth=1,
linecolor='lightgrey'),
)
st.subheader('Plotlyで表示')
st.plotly_chart(fig)
引数on_clickに関数を指定し、引数argsに指定した関数の引数を指定することで関数を呼び出すことも可能ですが、こういったCallback機能についてはまた別途解説したいと思います。
ちなみに、keyという引数の使い方も別途紹介したいと思いますが、もし引数もすべて全く同じウィジェットを2つ作成するとStreamlitではどっちがどっちか区別できませんので、そのときは違うkeyを指定して一意にしないといけません。
ボタンを押すことでデータをダウンロードすることができます。
ダッシュボードを作成すると、元になったデータをダウンロードしたいというニーズは非常に高いです。
その機能をJavaScriptなしでたったの1行で実現することが可能というのは驚きですね。
前準備としてDataFrameをCSVにしておきます。
csv = df.to_csv().encode('SHIFT-JIS')
基本的な設定は以下です。
- label
ボタンに表示するラベルを設定 - data
ダウンロードするデータを設定 - file_name
ファイルをダウンロードしたときのファイル名を設定します。 - mime
ファイルの形式を設定します。ここでは"text/csv"としています。プレーンなテキストファイルであれば"text/plain"、画像であれば"image/png"を指定します。
st.title('Data Download Button')
st.header('2021年の株価推移')
st.download_button(label='Data Download',
data=csv,
file_name='stock_price.csv',
mime='text/csv',
)
st.line_chart(df[['スノーピーク', '楽天', 'トヨタ']])
すると、以下のようにグラフのデータをダウンロードすることができます。
チェックボックス：st.checkbox
続いてチェックボックスです。
3つのcolumnを用意して、st.checkboxを呼び出しますが、labelにそれぞれスノーピーク、楽天、トヨタを指定します。
戻り値は選択されていればTrue、選択されていなければFalseになります。
st.title('Check Box')
st.header('2021年の株価推移')
col = st.columns(3)
snowpeak = col[0].checkbox(label='スノーピーク')
rakuten = col[1].checkbox(label='楽天')
toyota = col[2].checkbox(label='トヨタ')
stocks = []
if snowpeak:
stocks.append('スノーピーク')
if rakuten:
stocks.append('楽天')
if toyota:
stocks.append('トヨタ')
st.line_chart(df[stocks])
すると以下のように、選択された項目にしたがってグラフを表示することができます。
ラジオボタン：st.radio
ラジオボタンは複数の選択肢の中から一つ選ぶ場合に利用されます。
st.radioの基本的な設定は以下です。
- label
ラジオボタンの上に表示するテキストを指定します。 - options
選択するリストを設定します。 - index
デフォルトで選択されている項目をインデックスで指定します。
例えば、index=1とすると2番目の楽天がデフォルトで選択された状態になります。
指定しなければデフォルトの0が設定されます。 - horizontal
Trueにすると横に並べて表示されます。
st.title('Radio')
st.header('2021年の株価推移')
stock = st.radio(label='銘柄を選択してください',
options=('スノーピーク', '楽天', 'トヨタ'),
index=0,
horizontal=True,
)
st.line_chart(df[[stock]]
戻り値は、optionsで指定されたラベルが返ってきます。
ですので、スノーピークが選択されていれば"スノーピーク"が返ってきます。
セレクトボックス：st.selectbox
選択肢が多い場合には、ラジオボタンでは見にくくなる場合がありますので、その場合はセレクトボックスを使うのもよいですね。
基本的な設定はこちらです。
- label
セレクトボックスの上部に表示するテキスト情報を設定
options
選択項目を設定します。
リスト形式でもnumpyの配列でも、pandasのSeriesやindexでも大丈夫です。
st.title('セレクトボックス')
st.header('2021年の株価推移')
stock = st.selectbox(label="銘柄を選んでください",
options=df.columns)
st.line_chart(df[[stock]])
以下のようにドロップダウンで選択できるようになります。
ちなみに、format_funcという引数を使うとリストをうまく変換してくれます。
例えば、以下の場合はformat_funcにformat_funcを設定した場合です。
def my_format_func(original_label):
return original_label + 'を選ぶ'
stock = st.selectbox(label="銘柄を選んでください",
options=df.columns,
format_func=my_format_func,
)
st.line_chart(df[[stock]])
マルチ・セレクトボックス：st.multiselect
セレクトボックスでリストから複数選択できるようにしたのがマルチ・セレクトボックスです。
設定の方法はセレクトボックスと同じです。
labelにテキスト情報、optionsに選択項目を指定します。
st.title('マルチ・セレクトボックス')
st.header('2021年の株価推移')
stocks = st.multiselect(label="銘柄を選んでください",
options=df.columns,
)
st.line_chart(df[stocks])
以下のようにdefaultにラベルを指定すると、指定したラベルが最初から選択された状態になります。
stocks = st.multiselect(label="銘柄を選んでください",
options=df.columns,
default=["スノーピーク", "楽天"]
)
(ご参考) Streamlitを学ぶことができるUdemy講座
最後にStreamlitを学ぶことができる講座を2つご紹介しておきます。
軽快なテンポで、非常にわかりやすく、楽しく学ぶことができると思います。
APIを使うことにより、テキストから音声生成をしたり、Youtubeのデータを使用したりと色々な応用例を学ぶことができます。
『Streamlit, Pandas, Pythonで学ぶ！データ分析の基礎とインタラクティブダッシュボード作成入門』
オープンデータである一人あたり賃金データを使って、集計やStreamlitを使った可視化を行います。
データサイエンティストを目指している人、実際にデータ分析をしたい人にはオススメです。
まとめ
今回はStreamlitの重要ないくつかのウィジェットの使い方について見てきました。
本当に簡単に動的なグラフを作成したりすることができることがご理解いただけたかと思います。
もちろんダッシュボードだけでなく、Webアプリケーションを作成することも同じような感じで可能です。
もう少し複雑なダッシュボード、Webアプリはこれから作成していきたいと思います。
次回は各ウィジェットの使い方後編ということで、などのスライダーなどの使い方について解説していきたいと思います。
では！！