Streamlit中Altair图表正负值标签位置及颜色问题求助

我在Streamlit中使用Altair绘制条形图时遇到两个问题：

1. 希望负值条形的标签显示在左侧，正值条形的标签显示在右侧，但align属性无法直接用alt.condition设置
2. 已经把文本颜色设为黑色，但标签仍和条形颜色一致

当前代码如下：

c = alt.Chart(joint_exposures).mark_bar().encode(
                    y='Factor',
                    x='Active',
                    color=alt.condition(
                        alt.datum['Active'] > 0,
                        alt.value("#003865"),  # 正值颜色
                        alt.value("#5E8AB4")  # 负值颜色
                    ),
                    tooltip=[
                        alt.Tooltip('Factor:N'),  # 显示类别
                        alt.Tooltip('Active:Q', format='.4f', title='Active Exposure')
                        # 保留4位小数
                    ]
                )
                text = c.mark_text(
                    baseline='middle',
                    color='black',
                    align='left',
                    dx=5
                ).encode(
                    text=alt.Text('Active:Q',
                                  format=",.3f"
                                  )
                )
                table_height = 35 * (len(joint_exposures) + 2)
                chart = (c + text).properties(height=table_height).configure_axis(
                    labelColor='black',
                    titleColor='black'
                ).configure_title(
                    color='black'
                ).configure_legend(
                    labelColor='black',
                    titleColor='black'
                )
                st.altair_chart(chart, use_container_width=True)

1. 标签位置：正负值分左右显示 #

Altair的mark_text的align不支持直接用condition，但可以通过**动态设置水平偏移量dx**实现需求：

• 正值条形：设置dx为正数，让标签偏移到条形右侧
• 负值条形：设置dx为负数，让标签偏移到条形左侧

2. 文本颜色：强制脱离条形颜色继承 #

原代码中文本层基于条形图c创建，会自动继承color编码。需要重新初始化文本层，在encode中明确设置文本颜色为黑色。

修改后的完整代码：

c = alt.Chart(joint_exposures).mark_bar().encode(
    y='Factor',
    x='Active',
    color=alt.condition(
        alt.datum['Active'] > 0,
        alt.value("#003865"),  # 正值颜色
        alt.value("#5E8AB4")  # 负值颜色
    ),
    tooltip=[
        alt.Tooltip('Factor:N'),
        alt.Tooltip('Active:Q', format='.4f', title='Active Exposure')
    ]
)

# 重新创建文本层，避免继承条形图的颜色编码
text = alt.Chart(joint_exposures).mark_text(
    baseline='middle',
).encode(
    y='Factor',
    x='Active',
    text=alt.Text('Active:Q', format=",.3f"),
    # 动态控制标签偏移方向
    dx=alt.condition(
        alt.datum['Active'] > 0,
        alt.value(5),  # 正值标签右移5像素
        alt.value(-5)  # 负值标签左移5像素
    ),
    # 强制设置文本颜色为黑色
    color=alt.value('black')
)

table_height = 35 * (len(joint_exposures) + 2)
chart = (c + text).properties(height=table_height).configure_axis(
    labelColor='black',
    titleColor='black'
).configure_title(
    color='black'
).configure_legend(
    labelColor='black',
    titleColor='black'
)
st.altair_chart(chart, use_container_width=True)

关键修改说明 #

• 文本层不再基于条形图c创建，而是独立初始化，避免继承颜色属性
• 用dx的条件判断替代align，通过偏移量灵活控制标签位置
• 在文本层的encode中明确设置color=alt.value('black')，确保颜色不受条形影响

内容的提问来源于stack exchange，提问作者denotwi