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

JS2IIU

1年前

こんにちは、JS2IIUです。

StreamlitでDataFrameを表示させる際に、セルの中にグラフを表示させることができるst.column_config.AreaChartColumnを紹介します。データの傾向を分かりやすく表示するとても有効な機能です。今回もよろしくお願いします。

はじめに
st.column_config.AreaChartColumnとは？
1. 主な用途
2. 主な引数
実際の使用例
1. 例：売上推移をエリアチャートで表示
  1. 実行結果
2. サンプルコードの解説
応用例：プロジェクト進捗率の可視化
1. 例：進捗率をエリアチャートで表示
  1. 実行結果
注意点
まとめ

はじめに

st.column_config.AreaChartColumnは、Streamlitでデータフレーム内にエリアチャート（面積チャート）を表示するためのクラスです。データフレームの特定の列をエリアチャートとして視覚化することで、時間的変化や累積データを直感的に把握できます。この記事では、このクラスの基本的な使い方や設定オプション、応用例を紹介します。

st.column_config.AreaChartColumnとは？

AreaChartColumnは、データフレーム内の列をエリアチャートとしてレンダリングするために使用します。各セルのデータをチャートとして描画するため、情報がより分かりやすくなり、データの動向を視覚的に確認することが可能です。

主な用途

売上データの可視化
時系列データを表示して売上推移を視覚化。
プロジェクトの進捗確認
各プロジェクトの進捗率を累積データで表現。
傾向の比較分析
異なるカテゴリ間での傾向の比較。

主な引数

引数	説明	デフォルト値
`label`	列名を指定します。	`None`
`help`	列に関する補足情報を指定します（ツールチップとして表示）。	`None`
`width`	エリアチャートの幅を指定します（ピクセル単位）。	`None`
`y_min`	チャートのY軸の最小値を指定します。	`None`
`y_max`	チャートのY軸の最大値を指定します。	`None`

実際の使用例

以下の例では、複数製品の売上推移をエリアチャートで表示します。

例：売上推移をエリアチャートで表示

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

# データフレームを作成
data = {
    "Product": ["A", "B", "C"],
    "Sales Trends": [
        [10, 15, 5, 25, 30],
        [5, 10, 25, 10, 5],
        [20, 13, 25, 30, 35]
    ]
}
df = pd.DataFrame(data)

# AreaChartColumnで列をカスタマイズ
column_config = {
    "Sales Trends": AreaChartColumn(
        label="売上推移",
        help="各製品の売上推移をエリアチャートで表示します。",
        y_min=0,  # Y軸の最小値を0に固定
        y_max=40  # Y軸の最大値を40に設定
    )
}

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

実行結果

このコードを実行すると、以下の内容が表示されます：

各製品の売上推移をエリアチャートで視覚化。
y_min=0とy_max=40を設定することで、全チャートで同じスケールが維持され、比較が容易。

サンプルコードの解説

データ作成
データフレームには、各製品の名前と売上推移（リスト形式）が含まれています。
カスタム列の設定

labelで列名を「売上推移」と設定。
helpで列の説明を追加し、マウスホバー時にツールチップを表示。
y_minとy_maxを設定し、Y軸のスケールを統一。

データフレーム表示
st.dataframeにカスタム設定を渡し、エリアチャート付きのデータフレームを生成。

応用例：プロジェクト進捗率の可視化

次に、プロジェクト進捗率をエリアチャートで視覚化する例を示します。

例：進捗率をエリアチャートで表示

# プロジェクトデータの作成
progress_data = {
    "Project": ["Alpha", "Beta", "Gamma"],
    "Progress Trends": [
        [10, 20, 40, 75, 90, 100],
        [5, 15, 25, 35, 50, 70],
        [0, 10, 15, 30, 70, 100]
    ]
}
df_progress = pd.DataFrame(progress_data)

# カスタム列設定
column_config_progress = {
    "Progress Trends": AreaChartColumn(
        label="進捗率推移",
        help="各プロジェクトの進捗率をエリアチャートで可視化します。",
        y_min=0,  # 進捗率は0%から始まる
        y_max=100  # 最大値を100%に設定
    )
}

# データフレーム表示
st.dataframe(df_progress, column_config=column_config_progress)