如何在Altair/Vega条形图中隐藏过短条形上的文本标记

要实现基于条形像素高度而非数值阈值来控制文本标签的显示，核心是通过Altair的比例尺表达式将数值转换为像素坐标，进而计算出条形的实际像素高度，再与文本所需的最小像素高度对比。

具体实现步骤 #

1. 计算条形的像素高度：利用Altair的alt.expr.scale()方法，获取y轴比例尺对数值的像素映射。由于SVG坐标系中y轴像素从上到下递增，条形的高度等于「0值对应的像素坐标」减去「当前条形数值对应的像素坐标」。
2. 设定文本最小高度阈值：根据文本的字体大小估算所需的最小高度（例如字体大小12px时，阈值设为16px，预留少量间距）。
3. 条件控制文本显示：将计算出的条形高度与阈值对比，小于阈值时隐藏文本，否则显示标签。

完整代码示例 #

import altair as alt
import pandas as pd

# 模拟测试数据
df = pd.DataFrame({
    'category': ['A', 'A', 'B', 'B', 'C'],
    'issue': ['Issue1', 'Issue2', 'Issue3', 'Issue4', 'Issue5'],
    'tickets': [50, 150, 80, 200, 30]
})

# 创建堆叠条形图
bar_chart = alt.Chart(df).mark_bar().encode(
    x='category:N',
    y='tickets:Q',
    color='issue:N'
)

# 创建文本标签层，基于像素高度判断显示
text_layer = alt.Chart(df).mark_text(
    align='center',
    baseline='bottom',
    fontSize=12  # 文本字体大小，用于估算最小高度阈值
).encode(
    x='category:N',
    y=alt.Y('tickets:Q', stack='zero'),  # 堆叠条形图需设置stack='zero'
    text=alt.condition(
        # 计算条形像素高度：0值像素 - 当前数值像素，对比文本最小高度（这里设为16px）
        alt.expr.scale('y').map(0) - alt.expr.scale('y').map(alt.datum.tickets) < 16,
        alt.value(''),  # 高度不足时隐藏文本
        alt.Text('issue:N')  # 高度足够时显示标签
    )
)

# 组合图表
(bar_chart + text_layer).properties(width=400, height=300)

关键细节说明 #

• stack='zero'：堆叠条形图中，必须给y轴设置该参数，确保文本标签的y坐标对应条形的顶部位置。
• 阈值调整：可根据实际字体大小修改阈值（例如fontSize=14时，阈值设为18px），保证文本能完整容纳在条形内。
• 自动比例尺：无需手动指定y轴的domain，Altair会根据数据自动计算，scale('y')会自动绑定当前图表的y轴比例尺。

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