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

JS2IIU

2年前

こんにちは、JS2IIUです。

st.dataframeで表示するデータの数字表示について、カスタム可能になるNumberColumを紹介します。これにより無機質な数値の羅列から、意味が伝わりやすい表示にレベルアップさせることができます。今回もよろしくお願いします。

はじめに
st.column_config.NumberColumnとは
主なパラメータの解説
主な用途
実際の使用例
1. 例：単位とフォーマット付きの数値列表示
2. 解説
注意点
まとめ

はじめに

データフレーム内の数値データを直感的に視覚化したい場合、Streamlitのst.column_config.NumberColumnは非常に便利です。このクラスを使うことで、数値列をカスタマイズし、単位や色付けを追加したり、値の範囲を強調したりすることができます。本記事では、st.column_config.NumberColumnの基本的な使い方と応用例を詳しく解説します。

st.column_config.NumberColumnとは

st.column_config.NumberColumnは、データフレーム内の数値データをカスタマイズするための専用クラスです。このクラスを使用することで、次のような設定を行えます：

数値のフォーマット（例：通貨記号や小数点の設定）
ユーザー補助用のヘルプテキストやラベルの設定
値の範囲や増減ステップの指定
動的な条件付けによるカスタムスタイル（色やアイコン）の適用

主なパラメータの解説

以下は、st.column_config.NumberColumnのシグネチャと各パラメータの詳細です。

st.column_config.NumberColumn(
    label=None, *, 
    width=None, 
    help=None, 
    disabled=None, 
    required=None, 
    default=None, 
    format=None, 
    min_value=None, 
    max_value=None, 
    step=None
)

label
列のラベル名を指定します。デフォルトでは列名がそのまま使用されます。
width
列の幅をピクセル単位で指定します。未指定の場合は、レイアウトに基づいて自動調整されます。
help
列のヘルプテキストを指定します。ユーザーが列ヘッダーにカーソルを合わせると表示されます。
disabled
列を編集不可にする場合はTrueを指定します。デフォルトはFalseです。
required
値が必須であることを指定します。Trueの場合、空の値を許容しません。
default
空欄の場合のデフォルト値を設定します。
format
数値のフォーマットを文字列で指定します。例えば、"%.2f"で小数点以下2桁の表示にできます。
min_value
値の最小値を指定します。これを下回る値は無効になります。
max_value
値の最大値を指定します。これを超える値は無効になります。
step
増減ステップを指定します。例えば、step=0.1とすることで、小数点以下1桁単位での調整が可能になります。

主な用途

数値データの表示フォーマットを変更して視覚的な理解を向上させる。
値の範囲やステップを指定して入力の制約を設ける。
条件付きのカスタムスタイル（色付けやアイコン）を設定する。
ユーザーの補助としてヘルプテキストを追加する。

実際の使用例

以下に、NumberColumnを使用した基本的な例を示します。

例：単位とフォーマット付きの数値列表示

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

# データフレームを作成
data = {
    "Item": ["Item A", "Item B", "Item C"],
    "Price": [1200, 850, 1550],
    "Discount": [0.1, 0.15, 0.2]
}
df = pd.DataFrame(data)

# NumberColumnで列をカスタマイズ
column_config = {
    "Price": NumberColumn(
        label="価格 (円)",
        help="商品の価格（税抜き）",
        format="¥%.0f",  # 円表記で整数
        min_value=0,
        step=50,
    ),
    "Discount": NumberColumn(
        label="割引率",
        help="商品の割引率",
        format="%.0f%%",  # パーセンテージ表記
        max_value=1,
        step=0.05,
    )
}

# カスタム列設定でデータフレームを表示
st.data_editor(df, column_config=column_config)

解説

データ作成
商品名、価格、割引率を含むデータを作成し、pandas.DataFrameに変換します。
NumberColumnの設定

Price列：
- 円表記フォーマット（¥%.0f）を適用し、整数値で表示。
- 最小値を0、ステップを50円単位に設定。
Discount列：
- パーセンテージ表記（%.0f%%）を適用し、最大値を1（100%）、ステップを0.05（5%単位）に設定。

カスタム表示
各列に設定したフォーマットと単位が適用され、見やすい数値列が表示されます。

注意点

フォーマット設定
formatの値は、Pythonの文字列フォーマット（%.2fなど）に従います。
パフォーマンス
条件付きのスタイル（色やアイコン）を大量のデータに適用する場合、計算効率に注意が必要です。

まとめ

st.column_config.NumberColumnを活用すれば、数値データをより直感的で見やすい形式で表示できます。フォーマットや範囲設定、動的スタイルの適用を組み合わせることで、データの可読性や操作性を大幅に向上させることができます。

次回は、チェックボックス列の表示をカスタマイズできるst.column_config.CheckboxColumnについて解説します。お楽しみに！

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

https://docs.streamlit.io/develop/api-reference/data/st.column_config/st.column_config.numbercolumn

最後まで読んでいただきありがとうございました。73