Altair带标签分组柱状图的坐标轴调整与样式优化问题

调整后可解决全部问题的完整代码 #

import altair as alt

def missing_vals1(data, debug=False):
    # 基础柱状图层
    chart = alt.Chart(data).mark_bar(size=15).encode(
        x=alt.X(
            field='claim', 
            type='nominal', 
            axis=alt.Axis(labels=False, title=None, ticks=False),
        ),
        y=alt.Y(
            'Total:Q', 
            axis=alt.Axis(grid=False, labelColor='black', titleColor='black')
        ), 
        color=alt.Color('claim', legend=None) # 若需要展示图例，删除legend=None即可
    )
    # 数值标签层
    text = chart.mark_text(
        color='black',
        dy=-5
    ).encode(
        text=alt.Text('Total:Q', format=',.0f')
    )
    # 图层叠加后分面，调整分面配置
    return alt.layer(chart, text, data=data).facet(
        column=alt.Column(
            '#_missing:O', # 设为有序类型保证分面顺序和数值顺序一致
            # 配置分面标题和标签显示在底部
            header=alt.Header(
                orient='bottom', # 分面标签移到x轴底部
                title='#_missing',
                labelColor='black', # 分面数值标签设为黑色
                titleColor='black' # 分面标题设为黑色
            )
        )
    ).configure_view(
        continuousHeight=200,
        continuousWidth=40 # 修正原参数过小的问题，可根据实际显示效果调整
    ).configure_facet(
        spacing=10 # 控制列之间的间距，数值越小间距越窄
    ).configure_axis(
        labelColor='black',
        titleColor='black'
    )

对应问题的修改说明 #

• 解决#_missing标题和分面数值移到x轴底部的问题：通过给alt.Column配置header=alt.Header(orient='bottom')，直接将分面的标签和标题全部移动到x轴下方，无需调整color编码逻辑。
• 解决分面后标签无法正常显示的问题：保留原有的layer叠加逻辑，将分面操作放在layer叠加之后执行，保证标签层和柱状图层的编码完全对齐，不会出现标签错位或不显示的问题。
• 解决文本颜色和列间距的问题：
  • 全局通过configure_axis、configure_header配置所有坐标轴、分面的标签和标题颜色为黑色
  • 通过configure_facet(spacing=xx)调整分面列之间的间距，可根据实际显示需求修改数值
  • 修正了原代码中continuousWidth=0.5的异常配置，调整为合理宽度保证图表正常渲染

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