【表示系コンポーネントの整理:グラフ】streamlit で何か作りたいと思ったときに見る

前回の記事

streamlitでテキスト周りを表示するための良く使うコンポーネント一覧。
st.markdownが最も表現力が高い (HTML+CSSが書けるのであれば) 。

3. グラフ系

用途	関数	備考
折れ線グラフ	st.line_chart()	実装が楽、時系列データ向け
棒グラフ	st.bar_chart()	実装が楽、比較向け
面グラフ	st.area_chart()	実装が楽、量の変化比較向け
Altair	st.altair_chart()	高機能&リッチ UI
Plotly	st.plotly_chart()	可視化ツールおすすめ(追記)
Matplotlib	st.pyplot()	細かく調整が効く・レスポンス不可

サンプル

共通のデータでグラフを比較する。
以下のライブラリをインポートしている前提で話を進める。

    import streamlit as st
    import pandas as pd
    import numpy as np
    import altair as alt # altair用
    import plotly.express as px # plotly用
    import matplotlib.pyplot as plt # matplotlib用

比較するためのデータは、ランダムなサンプルデータを利用する。

np.random.seed(1225) 
days = pd.date_range("2025-12-01", periods=25)
pv = np.random.randint(50, 200, size=25)

df = pd.DataFrame({"day": days, "pv": pv}).set_index("day")

st.subheader("25日間のpv数推移")
st.dataframe(df)

st.line_chart()

st.subheader("1. st.line_chart()")
st.line_chart(df)

カーソルを合わせるとその点におけるデータが閲覧できる。
右上の表アイコンを押すと、表による表示に変更できる。
その他、ドラッグするとグラフをずらしてみることができる。

st.bar_chart()

st.subheader("2. st.bar_chart()")
st.bar_chart(df)

折れ線グラフ同様の機能。

st.area_chart()

st.subheader("3. st.area_chart()")
st.area_chart(df)

折れ線グラフ同様の機能。

st.altair_chart()

st.subheader("4. st.altair_chart()")
df = pd.DataFrame({"day": days, "pv": pv})

# ホバー選択を定義
hover = alt.selection_point(
    fields=["day"],
    nearest=True,
    on="mouseover",
    empty="none",
)


# 基本のライン
line = (
    alt.Chart(df)
    .mark_line(interpolate="monotone")  # スムーズなカーブ
    .encode(
        x=alt.X("day:T", title="日付"),
        y=alt.Y("pv:Q", title="PV"),
    )
)

# 点のレイヤー + ホバー時強調
points = (
    line
    .mark_circle(size=70, filled=True)
    .encode(
        opacity=alt.condition(hover, alt.value(1), alt.value(0)),
        tooltip=["day:T", "pv:Q"],
    )
    .add_params(hover)
)

# ホバー位置に縦線を引く
vline = (
    alt.Chart(df)
    .mark_rule(color="gray")
    .encode(
        x="day:T",
        opacity=alt.condition(hover, alt.value(0.6), alt.value(0)),
    )
)

# 重ね合わせ（レイヤー）
final_chart = alt.layer(line, points, vline).properties(
    height=300,
    title="25日間のPV（Altairデモ）"
)

st.altair_chart(final_chart, width="stretch")

streamlitデフォルトのグラフよりも少しリッチなUIで表現できる
グラフのうちどこにカーソルを合わせているかなど、「見やすいUI」を作るのに向いている。

st.plotly_chart()

st.subheader("5. st.plotly_chart()")

df_plotly = df.reset_index()
fig = px.line(
    df_plotly,
    x="day",
    y="pv",
    title="25日間のPV（plotlyデモ）",
)
fig.update_traces(mode="lines+markers")  # 線＋点
fig.update_layout(xaxis_title="日付", yaxis_title="PV")
st.plotly_chart(fig, width="stretch")

グラフの領域をドラッグして選択すると、その部分だけ大きく表示することができる。
大量の時系列データを表示させて一部分だけを見るような可視化ツールを作る場合、plotlyでの作成が望ましい。

st.pyplot()

st.subheader("6. st.pyplot()")

fig2, ax = plt.subplots()
ax.plot(df.index, df["pv"], marker="o")
ax.set_title("25日間のPV(pyplotデモ)")
ax.set_xlabel("日付")
ax.set_ylabel("PV")
fig2.autofmt_xdate()  # 日付ラベルを斜めにして読みやすく
st.pyplot(fig2)

matplotlibで出力される画像がそのまま表示されるイメージ。
そのためドラッグして拡大や系列データダウンロードはできない。
ある程度テンプレート化されているデータに対して可視化するのであれば問題なく利用できる。

日本語を入力すると画像のように文字化けするので、その場合は日本語対応のフォントを明示的に指定する必要がある。

追記：plotlyについて

いろんなデータを扱うのであればplotlyがおすすめ。

位置情報可視化ツール

import streamlit as st
import pandas as pd
import plotly.express as px

st.title("Plotly：GPS散布図")

# 仮のGPS
df = pd.DataFrame({
    "lat": [35.454674],
    "lon": [139.631488],
    "place": ["横浜ランドマークタワー"],
})

fig = px.scatter_mapbox(
    df,
    lat="lat",
    lon="lon",
    hover_name="place",
    zoom=10,
    height=500,
)

# Mapboxの表示にはスタイルが必要（OpenStreetMapは無料）
fig.update_layout(mapbox_style="open-street-map")

st.plotly_chart(fig, width="stretch")

少し見えにくいが、横浜ランドマークタワーの位置に青い点を地図上に重畳することができる。
地図自体もスクロール・拡大縮小ができるので、GPSの移動情報などをプロットすると
移動経路の可視化が可能となる。