如何在Streamlit ProgressColumn中实现行级自定义最值进度条？

Streamlit原生的ProgressColumn确实仅支持全局统一的min_value和max_value，无法为每行单独配置对应的52周高低点。你可以通过以下两种方案实现需求：

方案一：计算相对百分比后用ProgressColumn展示 #

先为每行计算收盘价相对于自身52周高低点的百分比，再用ProgressColumn展示这个百分比，同时保留原始收盘价列供查看：

import streamlit as st
import pandas as pd

# 模拟股票数据（替换成你的真实数据）
df = pd.DataFrame({
    "股票代码": ["AAPL", "MSFT", "GOOG"],
    "52周低点": [150.00, 300.00, 100.00],
    "52周高点": [200.00, 400.00, 150.00],
    "最新收盘价": [180.00, 350.00, 120.00]
})

# 计算相对进度百分比，避免除以0的情况
df["进度百分比"] = df.apply(
    lambda row: ((row["最新收盘价"] - row["52周低点"]) / (row["52周高点"] - row["52周低点"])) * 100 
    if row["52周高点"] != row["52周低点"] else 0,
    axis=1
)

st.data_editor(
    df,
    column_config={
        "进度百分比": st.column_config.ProgressColumn(
            "收盘价位置",
            min_value=0,
            max_value=100,
            format="%.1f%%",  # 显示百分比
            tooltip=df["最新收盘价"].apply(lambda x: f"${x:.2f}")  # 鼠标悬停显示收盘价
        ),
        "最新收盘价": st.column_config.NumberColumn("最新收盘价", format="$%.2f"),
        "52周低点": st.column_config.NumberColumn("52周低点", format="$%.2f"),
        "52周高点": st.column_config.NumberColumn("52周高点", format="$%.2f")
    },
    hide_index=True
)

方案二：自定义HTML进度条（更灵活） #

通过生成每行专属的HTML进度条，利用TextColumn的unsafe_allow_html=True渲染，完全自定义样式和逻辑：

import streamlit as st
import pandas as pd

df = pd.DataFrame({
    "股票代码": ["AAPL", "MSFT", "GOOG"],
    "52周低点": [150.00, 300.00, 100.00],
    "52周高点": [200.00, 400.00, 150.00],
    "最新收盘价": [180.00, 350.00, 120.00]
})

# 生成自定义HTML进度条
def get_progress_html(row):
    low = row["52周低点"]
    high = row["52周高点"]
    price = row["最新收盘价"]
    
    if high == low:
        progress_width = 100
    else:
        progress_width = ((price - low) / (high - low)) * 100
    
    return f"""
    <div style="display: flex; align-items: center; gap: 10px;">
        <div style="width: 220px; height: 22px; background: #f0f2f6; border-radius: 11px; overflow: hidden;">
            <div style="width: {progress_width}%; height: 100%; background: #10b981; border-radius: 11px;"></div>
        </div>
        <span style="font-weight: 500;">${price:.2f}</span>
    </div>
    """

df["收盘价进度条"] = df.apply(get_progress_html, axis=1)

st.data_editor(
    df,
    column_config={
        "收盘价进度条": st.column_config.TextColumn(
            "收盘价位置",
            width="large",
            unsafe_allow_html=True
        ),
        "52周低点": st.column_config.NumberColumn("52周低点", format="$%.2f"),
        "52周高点": st.column_config.NumberColumn("52周高点", format="$%.2f")
    },
    hide_index=True
)

两种方案都能实现“每行基于自身52周高低点展示收盘价位置”的需求，方案二的样式自由度更高，适合需要定制视觉效果的场景。

内容的提问来源于stack exchange，提问作者engineer-x