Altair交互式图例选中分层条形图时如何在条形上方显示数值

你可以新增一个mark_text文本图层，复用已定义的图例选择器selection控制文本显隐，即可实现选中对应批次时在条形上方展示数值的需求。

完整修改后代码 #

首先导入依赖库：

import pandas as pd
import altair as alt

使用你提供的样本数据：

percentage_data = pd.DataFrame({"index":{"0":"A1%","1":"A2%","2":"A3%","3":"A4%","4":"A5%","5":"A6%"},"percentage":{"0":10.0,"1":82.0,"2":42.0,"3":90.0,"4":69.0,"5":60.0}})

batch_data = pd.DataFrame({"Mean%":{"0":54.1836734694,"1":51.056122449,"2":50.7091836735,"3":56.887755102,"4":52.5918367347,"5":50.8571428571,"6":56.2621359223,"7":48.9611650485,"8":51.213592233,"9":60.0,"10":52.5339805825,"11":49.1504854369,"12":55.2195121951,"13":49.2975609756,"14":51.2975609756,"15":56.487804878,"16":49.0,"17":49.2390243902,"18":54.0625,"19":52.28125,"20":47.7291666667,"21":56.6145833333,"22":50.3177083333,"23":52.7135416667,"24":57.7114427861,"25":49.8009950249,"26":49.9303482587,"27":54.4776119403,"28":50.2189054726,"29":48.9253731343},"Assignment":{"0":"A1%","1":"A2%","2":"A3%","3":"A4%","4":"A5%","5":"A6%","6":"A1%","7":"A2%","8":"A3%","9":"A4%","10":"A5%","11":"A6%","12":"A1%","13":"A2%","14":"A3%","15":"A4%","16":"A5%","17":"A6%","18":"A1%","19":"A2%","20":"A3%","21":"A4%","22":"A5%","23":"A6%","24":"A1%","25":"A2%","26":"A3%","27":"A4%","28":"A5%","29":"A6%"},"Batch":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":3,"13":3,"14":3,"15":3,"16":3,"17":3,"18":4,"19":4,"20":4,"21":4,"22":4,"23":4,"24":5,"25":5,"26":5,"27":5,"28":5,"29":5}})

原有绘图逻辑保留，新增文本图层：

single = alt.selection_single(on='mouseover', nearest=True, empty='none')
circle = alt.Chart(data=percentage_data, width=500, height=500).mark_circle(size=75).encode(
    x = alt.X('index', axis=alt.Axis(title='Assignments', tickMinStep=1)),
    y = alt.Y('percentage', axis=alt.Axis(title='Percentage'), scale=alt.Scale(domain=[0, 100])),
    color = alt.condition(single, alt.value('red'), alt.value('blue')),
    tooltip = 'percentage'
).interactive(
    bind_y=False
).add_selection(
    single
)

bar_line = alt.Chart(data=percentage_data, width=500, height=500).mark_bar(size=2).encode(
    x = alt.X('index', axis=alt.Axis(title='Assignments', tickMinStep=1)),
    y = alt.Y('percentage', axis=alt.Axis(title='Percentage'), scale=alt.Scale(domain=[0, 100]))
)

selection = alt.selection_single(fields=['Batch'], bind='legend', empty='none')
bar = alt.Chart(data=batch_data, width=500, height=500).mark_bar(size=70).encode(
    x = 'Assignment',
    y = alt.Y('Mean%', stack=None),
    color='Batch:N',
    opacity = alt.condition(selection, alt.value(0.5), alt.value(0))
).add_selection(
    selection
)

# 新增文本图层，控制选中时显示数值
text = alt.Chart(data=batch_data, width=500, height=500).mark_text(
    align='center',
    dy=-5, # 向上偏移防止和条形顶部重叠
    fontSize=10
).encode(
    x = 'Assignment',
    y = alt.Y('Mean%', stack=None),
    text = alt.Text('Mean%:Q', format='.1f'), # 数值保留1位小数显示
    opacity = alt.condition(selection, alt.value(1), alt.value(0)) # 和条形同步显隐
)

# 组合图层时加入text图层
bar + bar_line + circle + text

效果说明 #

点击图例中任意批次项时，对应批次的半透明条形会展示，同时每个条形上方同步显示对应Mean%数值，取消选中时文本和条形同时隐藏。你可以根据需要调整dy、fontSize参数修改文本的位置和大小，调整format参数修改数值保留的小数位数。

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