Altair图表颜色未识别求助：小提琴图全显示为蓝色

我用Python的Altair和Streamlit开发本地实时更新的数据仪表盘，之前只接触过C语言，正在逐步学习相关技术。目前我通过OpenF1 API获取数据，将其转换为带#前缀的RGBA颜色值，按车手排序后存入包含小提琴图所需其他数据的pandas DataFrame，再传入alt.Chart()函数。但Altair无法识别这些颜色值，导致整个小提琴图显示为蓝色。

小提琴图代码 #

lapViolin = alt.Chart(data2, width=100).transform_density(
    'Laptime',
    as_=['Laptime','density'],
    groupby=['Driver']
).mark_area(orient='horizontal').encode(
    x=alt.X('density:Q')
        .stack('center')
        .title(None)
        .impute(None)
        .axis(labels=False, values=[0], grid=False, ticks=True),
    y=alt.Y('Laptime:Q'),
    color=alt.Color('Team'),
    column=alt.Column('Driver:N')
        .spacing(0)
        .header(titleOrient='bottom', labelOrient='bottom', labelPadding=0)
).configure_view(
    stroke=None
)
st.altair_chart(lapViolin)

问题现象 #

• 小提琴图全部显示为蓝色
• 制作散点图时，使用相同的color='Team'和alt.Column()配置，数据分组正确，但仅应用预设颜色

Altair不会自动读取DataFrame中存储的颜色字符串，必须明确配置颜色映射规则，将Team字段与对应的自定义颜色绑定。

1. 提取颜色映射关系 #

从你的DataFrame中提取Team和对应颜色的唯一映射（假设颜色列名为Color，请替换为实际列名）：

color_map = data2[['Team', 'Color']].drop_duplicates().set_index('Team')['Color'].to_dict()

2. 修改Altair颜色编码 #

在alt.Color()中通过scale参数指定自定义颜色映射：

color=alt.Color('Team:N', scale=alt.Scale(domain=list(color_map.keys()), range=list(color_map.values())))

修改后的小提琴图完整代码 #

# 提取Team与颜色的映射关系
color_map = data2[['Team', 'Color']].drop_duplicates().set_index('Team')['Color'].to_dict()

lapViolin = alt.Chart(data2, width=100).transform_density(
    'Laptime',
    as_=['Laptime','density'],
    groupby=['Driver']
).mark_area(orient='horizontal').encode(
    x=alt.X('density:Q')
        .stack('center')
        .title(None)
        .impute(None)
        .axis(labels=False, values=[0], grid=False, ticks=True),
    y=alt.Y('Laptime:Q'),
    # 应用自定义颜色映射
    color=alt.Color('Team:N', scale=alt.Scale(domain=list(color_map.keys()), range=list(color_map.values()))),
    column=alt.Column('Driver:N')
        .spacing(0)
        .header(titleOrient='bottom', labelOrient='bottom', labelPadding=0)
).configure_view(
    stroke=None
)
st.altair_chart(lapViolin)

散点图的适配方法 #

散点图只需沿用相同逻辑，替换颜色编码配置即可：

# 先提取color_map（和小提琴图共用即可）
scatter_chart = alt.Chart(your_scatter_data).mark_point().encode(
    x='你的X轴字段',
    y='你的Y轴字段',
    color=alt.Color('Team:N', scale=alt.Scale(domain=list(color_map.keys()), range=list(color_map.values()))),
    column='Driver:N'
)
st.altair_chart(scatter_chart)

注意事项 #

• 确保color_map中每个Team对应唯一的颜色值，避免重复或缺失
• Altair完全支持#RRGGBBAA格式的RGBA颜色，无需额外转换

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