【Streamlit】st.column_config.ProgressColumnの基本と使い方

JS2IIU

1年前

こんにちは、JS2IIUです。

StreamlitでDataFrameを表示する際にセルの中にプログレスバーを表示する機能を提供するst.column_config.ProgressColumnについて紹介します。スコアや進捗状況など、ゴールに対してどこまで近づいているかをグラフィカルに表示します。今回もよろしくお願いします。

はじめに
st.column_config.ProgressColumnとは？
1. 主な用途
2. パラメータの概要
実際の使用例
注意点
まとめ

はじめに

st.column_config.ProgressColumnは、Streamlitのデータフレーム表示機能で、列データをプログレスバー形式で視覚的に表現するためのクラスです。この機能は、進捗状況や割合を直感的に伝える場面で非常に便利です。例えば、プロジェクト管理アプリや学生の成績管理ツールなど、幅広いユースケースに対応できます。

st.column_config.ProgressColumnとは？

ProgressColumnは、Streamlitのデータフレーム内でプログレスバー形式の列を作成するためのクラスです。バーの長さや色で進捗率やスコアを直感的に表現でき、データの比較や分析が容易になります。

主な用途

タスク管理：プロジェクトの進捗状況をバー形式で表示。
パフォーマンス表示：スコアや割合を視覚的に比較。
データ状態の確認：進捗率や完了率を動的に表示。

パラメータの概要

パラメータ	説明	デフォルト値
`label`	列名を指定します。	`None`
`width`	列の幅を指定します。”small”, “medium”, or “large”で指定し、指定しない場合はコンテンツにあわせて幅を自動調整します。	`None`
`help`	ツールチップとして表示される補足情報を指定します。	`None`
`format`	プログレスバーの値をフォーマットします。例: `%.1f%%`	`None`
`min_value`	プログレスバーの最小値を設定します。	`0`
`max_value`	プログレスバーの最大値を設定します。	`100`

実際の使用例

以下では、タスクの進捗状況を可視化する例を示します。

例1: タスクの進捗を表示

import streamlit as st
import pandas as pd
from streamlit.column_config import ProgressColumn

# データフレームを作成
data = {
    "Task": ["Task A", "Task B", "Task C"],
    "Progress": [30, 70, 90]  # 各タスクの進捗率
}
df = pd.DataFrame(data)

# ProgressColumnで列をカスタマイズ
column_config = {
    "Progress": ProgressColumn(
        label="進捗状況",
        help="各タスクの進捗率を示します。",
        format="%.1f %%",  # 値をパーセント形式で表示
        min_value=0,  # 最小値を0に設定
        max_value=100  # 最大値を100に設定
    )
}

# データフレームを表示
st.data_editor(df, column_config=column_config)

サンプルコードの解説

データ準備
各タスクの進捗率（0～100％）を含むデータフレームを作成。
ProgressColumnの設定

label：列名を「進捗状況」に指定。
help：マウスオーバー時に「各タスクの進捗率を示します」という説明を表示。
format：値を「整数パーセント形式」にフォーマット。
min_value と max_value：値の範囲を0～100に設定。

データフレーム表示
各タスクの進捗率がプログレスバーで視覚的に表示されます。

応用例：学生の試験スコアの表示

次の例では、学生の試験スコアをバー形式で表示します。

import streamlit as st
import pandas as pd
from streamlit.column_config import ProgressColumn

# 試験スコアデータ
student_data = {
    "Student": ["Alice", "Bob", "Charlie"],
    "Score": [75.5, 45.4, 90.2]  # 試験スコア
}
df_students = pd.DataFrame(student_data)

# ProgressColumnでスコアをプログレスバー形式で表示
column_config_students = {
    "Score": ProgressColumn(
        label="試験スコア",
        help="学生の試験スコアをバーで表示します。",
        format="%.1f pt",  # 小数点以下1桁を表示
        min_value=0,  # スコアの最小値
        max_value=100  # スコアの最大値
    )
}

# データフレームを表示
st.data_editor(df_students, column_config=column_config_students)

実行結果

このコードを実行すると、学生ごとのスコアがプログレスバーで可視化されます。format="%.1f%%"を設定しているため、小数点以下1桁のパーセント表示が可能です。

注意点

スケールの確認
- データがmin_valueとmax_valueの範囲内に収まっていない場合、バーの表示が正確に行えません。データを事前に正規化することをおすすめします。

フォーマット設定
- 表示形式を変更する際は、formatオプションを活用してください（例：整数形式や小数形式）。

インタラクティブ性
- ProgressColumnは静的な表示であり、リアルタイムで更新する場合はデータフレームを再描画する必要があります。

まとめ

st.column_config.ProgressColumnは、進捗率や割合を視覚的に表現する便利な機能です。タスク管理、スコア表示、プロジェクト進捗の確認など、多くのシーンで活用できます。この記事で紹介したサンプルコードを参考に、自身のアプリケーションに応用してみてください。

公式ドキュメントはこちら：st.column_config.ProgressColumn