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

こんにちは、JS2IIUです。

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

はじめに

データフレーム内の数値データを直感的に視覚化したい場合、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)

解説

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

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

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

注意点

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

まとめ

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

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

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

st.column_config.NumberColumn - Streamlit Docs

st.column_config.NumberColumn configures number columns for displaying and editing numerical data with formatting options.

docs.streamlit.io

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