Altair分面图表中合并图例的实现问题

问题说明 #

合并两个拥有共同X轴和分面字段的DataFrame后，绘制分面网格图表时，每个子图都会重复显示两个颜色图例，需要将两个图例统一放在分面侧边仅显示一次。

修改后代码 #

import pandas as pd
import altair as alt

df1 = pd.DataFrame({'x':[1,2,3,1,2,3,1,2,3],
                    'y1':[6,7,8,1,3,5,9,8,7],
                    'cat':['A','A','A','B','B','B','C','C','C'],
                    'E1':[120,120,120,200,200,200,80,80,80]})

df2 = pd.DataFrame({'x':[1,2,3,4,1,2,3,4,1,2,3,4,5],
                    'y2':[6,8,8,9,2,4,6,8,9,7,5,4,3],
                    'cat':['A','A','A','A','B','B','B','B','C','C','C','C','C'],
                    'E2':[2,1,3,2,1,1,3,2,3,2,2,2,3]})

merged = pd.merge(df2, df1, how='outer', on=['cat','x'])

p1 = alt.Chart(merged).mark_line().encode(
    x='x:Q',
    y='y1:Q',
    color=alt.Color('E1:Q', scale=alt.Scale(scheme='viridis'), bin=alt.Bin(maxbins=5))
)

p2 = alt.Chart(merged).mark_circle().encode(
    x='x:Q',
    y='y2:Q',
    color=alt.Color('E2:N', scale=alt.Scale(domain=[1,2,3], range=['black','red','blue']))
)

alt.layer(p1, p2).facet(
    'cat:N'
).resolve_legend(
    color='shared'
).configure_legend(
    orient='right'
)

关键修改说明 #

• resolve_legend(color='shared')：指定颜色图例在所有分面子图中共享，避免每个子图重复渲染图例。
• configure_legend(orient='right')：将图例固定在分面右侧，也可改为orient='left'放在左侧，满足侧边显示的需求。

如果需要优化图例样式，可在configure_legend中添加参数，比如设置标题字体大小titleFontSize=12、标签字体大小labelFontSize=10等，调整布局更贴合需求。

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