我如何创建像 Altair 这样并排的条形图？

我想要创造的图片 https://i.stack.imgur.com/VZ0K3.png

我得到了图表的左侧（前三分之一），并尝试创建“bars2”和“text2”字段，但这不起作用，并将其添加到原始的ranked_movies字段中，但这一切都很混乱。有没有办法移动和压缩，也许添加一整套其他条形图？

tuples = list(zip([names[ep] for ep in episodes],topthird,middlethird))
binranking_per_df = pd.DataFrame(tuples, columns = ['Name', 'Top Third','Middle Third'])
#ranking_per_df


bars = alt.Chart(binranking_per_df).mark_bar(size=20).encode(
    x=alt.X(
        'Top Third',
        axis=None),
    y=alt.Y(
        'Name:N',
         axis=alt.Axis(tickCount=5, title=''),
         sort=names_l
    )
)

bars2 = alt.Chart(binranking_per_df).mark_bar(size=20).encode(
    x=alt.X(
        'Middle Third',
        axis=None),
    y=alt.Y(
        'Name:N',
         axis=alt.Axis(tickCount=5, title=''),
         sort=names_l
    )
)

text = bars.mark_text(
    align='left',
    baseline='middle',
    dx=3  
).encode(
    text=alt.Text('Top Third:Q',format='.0%')
)

text2 = bars.mark_text(
    align='left',
    baseline='middle',
    dx=3  
).encode(
    text=alt.Text('Middle Third:Q',format='.0%')
)

ranked_movies = (text + bars).configure_mark(
    color='#008fd5'
).configure_view(
    strokeWidth=0
).configure_scale(
    bandPaddingInner=0.2
).properties(
    width=500,
    height=180
).properties(
    title="Whats the Best 'Star Wars' Movie?"
)

这个问题（关于相同的图表）之前已回答过here https://stackoverflow.com/questions/64364794/altair-facet-mark-bar-chart，但不幸的是该问题已被用户删除。

这是我的回应：

Altair 画廊有一些多面条形图的示例（例如this one https://altair-viz.github.io/gallery/grouped_bar_chart_with_error_bars.html）对于您想要的图表，您可以继续faceting https://altair-viz.github.io/user_guide/compound_charts.html#faceted-charts a 图层图 https://altair-viz.github.io/user_guide/compound_charts.html#layer-chart其中包含一个栏和一个文本层。例如：

import altair as alt
import numpy as np
import pandas as pd

titles = ['The Phantom Menace', 'Attack of the Clones', 'Revenge of the Sith',
          'A New Hope', 'The Empire Strikes Back', 'Return of the Jedi']
categories = ['Top third', 'Middle third', 'Bottom third']
percentages = [
    [0.16, 0.14, 0.13, 0.50, 0.64, 0.43],
    [0.37, 0.29, 0.40, 0.31, 0.22, 0.41],
    [0.46, 0.57, 0.47, 0.19, 0.14, 0.17]
]
titles, categories, percentages = map(
    np.ravel, np.broadcast_arrays(
        titles, np.array(categories)[:, None], percentages))
df = pd.DataFrame({
    'titles': titles,
    'categories': categories,
    'percentages': percentages,
})

base = alt.Chart(df).encode(
    x=alt.X('percentages:Q', axis=None),
    y=alt.Y('titles:N', title=None, sort=titles),
).properties(
    width=70
)

bars = base.mark_bar().encode(
    color=alt.Color('categories:N', legend=None)
)
text = base.mark_text(dx=15).encode(
    text=alt.Text('percentages:Q', format=".0%")
)

(bars + text).facet(
    column=alt.Column('categories:N', title=None, sort=categories)
).configure_view(
    stroke='transparent'
)