Altair气泡地图文本显示与图表垂直动态缩放问题咨询

问题1：气泡地图上添加文本标签 #

在气泡地图上显示文本，只需在现有图层上叠加mark_text()图层，共享数据源和选择器即可，修改后的完整代码如下：

from vega_datasets import data
import pandas as pd
import altair as alt

mkt = pd.read_json('market.json')
mkt_list = mkt['name'].unique().tolist()

# 定义选择器
select_box = alt.binding_select(options=mkt_list, name='Make')
mkt_sel = alt.selection_single(fields=['name'], empty='none', bind=select_box,
                               init={'name': 'X1, A1'})

regions = alt.topo_feature(data.us_10m, feature="states")
background = alt.Chart(regions).mark_geoshape(
    fill="#deebf7",
    stroke="white"
).project("albersUsa")

# 气泡图层
map_circles = alt.Chart(mkt).mark_circle().encode(
    lat="lat:Q",
    lon="lon:Q",
    color=alt.Color('rev:Q', title='Rev',
                    scale=alt.Scale(scheme='blues', reverse=True)),
    size=alt.Size('supply:Q', title='Supply'),
    tooltip=[
        alt.Tooltip('name:N', title='Name'),
        alt.Tooltip('type:N', title='Type'),
        alt.Tooltip('rev:Q', format=".2f", title='Rev')
    ]
).add_selection(
    mkt_sel
).properties(
    width=200,
    height=100,
    title="Sample Map"
)

# 文本标签图层，可自定义显示内容和样式
map_text = alt.Chart(mkt).mark_text(
    fontSize=10,
    color='black',
    baseline='middle'
).encode(
    lat="lat:Q",
    lon="lon:Q",
    text=alt.Text('name:N'),  # 可替换为字段缩写或其他文本内容
    opacity=alt.condition(mkt_sel, alt.value(1), alt.value(0.6))  # 选中项文本高亮
).add_selection(mkt_sel)

# 合并所有图层
country_map = alt.layer(background, map_circles, map_text).resolve_legend(
    color="independent",
    size="independent"
)

关键说明：

• 通过alt.layer()合并背景、气泡、文本图层，确保文本与气泡位置完全对应
• 可通过mark_text()的fontSize、baseline等参数调整文本样式
• 利用alt.condition实现选中项文本高亮，提升交互体验

问题2：上下叠加图表时动态缩放垂直高度 #

要让上下拼接的图表自动调整高度以完整显示x轴标签，可通过以下两种方式实现：

方法1：配置自动尺寸适配 #

# 示例：定义第二个图表（柱状图）
chart2 = alt.Chart(mkt).mark_bar().encode(
    x='name:N',
    y='supply:Q'
).properties(
    title="Supply by Market",
    width=200
)

# 垂直拼接并启用自动尺寸适配
combined_charts = alt.vconcat(country_map, chart2).configure(
    autosize=alt.AutoSizeParams(type='fit', contains='padding')
).configure_axisX(
    labelAngle=-45  # 可选：倾斜标签减少横向占用，配合自动高度适配
)

方法2：移除固定高度，让图表自适应 #

如果图表设置了固定height，直接移除该参数，让Altair根据内容自动计算高度：

# 修改地图图表的properties，移除固定height
map_circles = alt.Chart(mkt).mark_circle().encode(
    # ... 保留原有encode配置
).properties(
    width=200,
    title="Sample Map"  # 移除height参数，高度自适应
)

# 垂直拼接图表
combined_charts = alt.vconcat(map_circles, chart2, spacing=20)

关键说明：

• autosize='fit'会让图表容器自动调整大小，确保所有元素（包括x轴标签）完整显示
• 若x轴标签过长，可通过labelAngle调整倾斜角度，进一步优化显示效果
• 可通过spacing参数调整上下图表之间的间距

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