如何在Altair中设置图片标记高度匹配Y值、宽度固定以实现类柱状图？

可以实现，核心是通过定义图片的垂直区间匹配Y轴数值，同时固定宽度并调整对齐方式。

当前效果 #

期望效果 #

修改后的代码 #

import altair as alt
import pandas as pd

source = pd.DataFrame({
    'a': ['A', 'B', 'C'],
    'b': [28, 12, 77],
    'url': ['https://vega.github.io/vega-datasets/data/7zip.png', 
            'https://vega.github.io/vega-datasets/data/gimp.png', 
            'https://vega.github.io/vega-datasets/data/ffox.png']
})

chart = alt.Chart(source).mark_image(
    width=50,  # 固定所有图片的宽度
    align='center',  # 图片在X轴分类位置居中
    baseline='bottom',  # 图片底部对齐Y=0的位置
    preserveAspectRatio='none'  # 让图片拉伸填充指定的垂直区间
).encode(
    x='a:N',
    y='b:Q',  # Y轴数值作为图片的顶部位置
    y2=alt.value(0),  # 图片底部固定在Y轴原点
    url='url'
).properties(
    width=512,
    height=512
).configure_axis(
    grid=False
)

chart

关键修改说明 #

• 移除原代码中的size编码：size会同时缩放图片宽高，无法单独控制宽度并匹配Y轴高度
• 使用y和y2编码：y='b:Q'指定图片顶部对应Y轴数值，y2=alt.value(0)固定图片底部在Y=0，让图片高度直接匹配Y轴数值
• 固定width参数：保证所有图片宽度一致
• 设置preserveAspectRatio='none'：让图片拉伸填充y到y2的垂直区间，实现柱状图的填充效果（若想保持图片比例，可改为preserveAspectRatio='xMidYMid meet'，但图片不会完全填充高度）
• align和baseline：确保图片在X轴分类位置居中，底部对齐Y轴原点，贴合柱状图的视觉逻辑

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