よしたく blog

ITエンジニアとして自分が知らなかったことをまとめています

Streamlitに用意されている「line_chart」「area_chart」「bar_chart」を触ってみた

Streamlit について引き続き確認していく。

yoshitaku-jp.hatenablog.com

今回は Streamlit で標準に用意されている simple chart を試す。

紹介されているのは以下の 3 種類になる。

line_chart

線グラフはst.line_chart関数で表現できる。 ここでは温度の上下を想定したデータを作って表現してみた。

df_temp = pd.DataFrame(
    np.random.uniform(15.0, 25.0, 6), columns=["温度"], index=np.array(range(9, 15))
)
st.line_chart(df_temp)

表示されるとこんな感じ。

f:id:yoshitaku_jp:20220305092503p:plain

docs.streamlit.io

area_chart

面グラフはst.area_chart関数で表現できる。 ここでは月の収支を想定したデータを作って表現してみた。

df_pl = pd.DataFrame(
    np.random.uniform(500, 1000, (12, 2)),
    columns=["収入", "支出"],
)
st.area_chart(df_pl)

表示されるとこんな感じ。

f:id:yoshitaku_jp:20220305092510p:plain

docs.streamlit.io

bar_chart

棒グラフはst.bar_chart関数で表現できる。 ここではページごとのクリック数を想定したデータを作って表現してみた。

df_clicks = pd.DataFrame(
    np.random.uniform(500, 1000, 3),
    columns=["clicks"],
    index=["Page A", "Page B", "Page C"],
)
st.bar_chart(df_clicks)

表示されるとこんな感じ。

f:id:yoshitaku_jp:20220305092518p:plain

docs.streamlit.io

まとめ

今回は simple chart として紹介されていた line_chartarea_chartbar_chartを触ってみた。

簡単に表現できてとても便利だと感じたが、DataFrame でのデータの持ち方や DataFrame の Index に依存するようなので、そこのメンテナンスが鍵になりそう。現段階で pyplot に慣れていない自分でも、関数に DataFrame を流すだけで図表を書いてくれるのは大変ありがたかった! また、今は種類が少ないので別の図表も表現できるようになれば嬉しいと感じた。 streamlit/roadmap#q2-2022に 「Develop apps in the browser.」「We want to make it much, much easier to create beautiful charts with a single line of code!」といったことが書いてあるので、期待している!

凝った表現をしたければシンタックスシュガーとして紹介されているst.altair_chart st.pyplotを使うことになる。Streamlit を導入する前までに pyplot で作成してきた資産があれば、こちらがいいと思う