使用交互式图例突出显示时在分层条上方显示文本值

Question

所以当条形图从图例中突出显示时，我需要在条形图上方有一个文本值。有什么办法可以实现吗？

这是我当前的代码：

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
)

bar + bar_line + circle

重新创建数据：

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}})

所以为此，我希望在从图例中选择条形图时在这一层上显示文本。

Answer 1

single = alt.selection_single(on='mouseover', nearest=True, empty='none')

circle = alt.Chart(data=percentage_data, width=500, height=500, title='Percentage vs Batch Average').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', titleFontSize=20, tickMinStep=1)),
    y = alt.Y('percentage', axis=alt.Axis(title='Percentage', titleFontSize=20), scale=alt.Scale(domain=[0, 100]))
)

selection = alt.selection_single(fields=['Batch'], bind='legend', empty='none')

base = alt.Chart(data=batch_data, width=500, height=500).encode(
    x = 'Assignment',
    y = alt.Y('Mean%', stack=None)
)

bar = base.mark_bar(size=70).encode(
    color='Batch:N',
    opacity = alt.condition(selection, alt.value(0.5), alt.value(0))
).add_selection(
    selection
)

text = base.mark_text(dx=0, dy=15, color='Black', size=20).encode(
    text = alt.Text('Mean%', format='.2f')
).transform_filter(
    selection
)

(bar + bar_line + text + circle).configure_title(
    fontSize=30
).configure_legend(
titleFontSize=18,
labelFontSize=18
)

基本上，问题是我的 mark_bar 图有一个 add_selection()，目前，Altair 仅支持编码条件，无法使用条件格式化文本。所以我制作了一个基础图表，并分别在基础上添加了 mark_bar 和 mark_text。这可能不是一个很好的解释，我对 Altair 还是个新手。

使用交互式图例突出显示时在分层条上方显示文本值

Show Text Value above Layered Bar when Highlighted with Interactive Legend

python

altair