如何使用 altair 在 hconcat 图表中显示两个不同的图例

Question

我需要并排显示两个单独的图表，包括它们在 Jupyterlab 中的图例，我设法做到这一点的唯一方法是使用 hconcat。我已经走到这一步了：

然而，即使使用 .resolve_legend(color='independent')，我也能在顶部的两个图例中显示两个图表中的条目 - 这非常令人困惑。

结果应该是这样的：

如何删除不需要的图例条目？或者，如果有人知道如何在单个 jupyterlab 单元格中并排绘制图表的好方法，我很乐意采用不同的方法。

我的代码如下所示：

import altair as alt
import pandas as pd
from altair.expr import datum
df_test=pd.read_csv("test_df.csv")

chart_m1=alt.Chart(df_test).mark_bar().encode(
            x=alt.X('counts:Q', stack="normalize",axis=None),
            y=alt.Y('category:N',sort=['A','B','C'],title=None),
            color=alt.Color('grade:N',
                sort = alt.EncodingSortField( 'sort:Q', order = 'ascending' ),
                scale = alt.Scale(domain=['good <10', 'average 10-20', 'bad >20'], range=['#0cce6b', '#ffa400', '#ff4e42']),
                legend = alt.Legend(title="Metric1",orient='top')),
            order='sort:Q',
            tooltip=['category:N','grade:N','counts:Q']
            ).transform_filter(datum.metric=='metric1'
            ).properties(height=50,width=150)

chart_m2=alt.Chart(df_test).mark_bar().encode(
            x=alt.X('counts:Q', stack="normalize",axis=None),
            y=alt.Y('category:N',sort=['A','B','C'],title=None),
            color=alt.Color('grade:N',
                sort = alt.EncodingSortField( 'sort:Q', order = 'ascending' ),
                scale = alt.Scale(domain=['good <100', 'average 100-350', 'bad >350'], range=['#0cce6b', '#ffa400', '#ff4e42']),
                legend = alt.Legend(title="Metric2",orient='top')),
            order='sort:Q',
            tooltip=['category:N','grade:N','counts:Q']
            ).transform_filter(datum.metric=='metric2'
            ).properties(height=50,width=150)

alt.hconcat(chart_m1,chart_m2).resolve_legend(color='independent').configure_view(stroke=None)

我用的test_df.csv是这样的：

category,metric,sort,grade,counts
A,metric1,1,good <10,345
B,metric1,1,good <10,123
C,metric1,1,good <10,567
A,metric1,2,average 10-20,567
B,metric1,2,average 10-20,678
C,metric1,2,average 10-20,789
A,metric1,3,bad >20,900
B,metric1,3,bad >20,1011
C,metric1,3,bad >20,1122
A,metric2,1,good <100,1122
B,metric2,1,good <100,1011
C,metric2,1,good <100,900
A,metric2,2,average 100-350,789
B,metric2,2,average 100-350,678
C,metric2,2,average 100-350,567
A,metric2,3,bad >350,567
B,metric2,3,bad >350,345
C,metric2,3,bad >350,123

Answer 1

使用resolve_scale(color='independent')

alt.hconcat(
    chart_m1, chart_m2
).resolve_scale(
    color='independent'
).configure_view(
    stroke=None
)

更多信息请见https://altair-viz.github.io/user_guide/scale_resolve.html

如何使用 altair 在 hconcat 图表中显示两个不同的图例

How to display two different legends in hconcat chart using altair

python

altair

jupyter-lab