当使用 `hconcat` 时,有没有一种方法可以对齐图表标题?

5
当使用alt.hconcat将两个条形图(一个水平,一个垂直)并排显示时,即使图表的高度相等,标题也会错位。是否有办法对齐标题?
# Makes test dataframe
test = pd.DataFrame({"group":["a","b","c"],"value1":[4,5,6], "value2":[10,12,14]}).reset_index()

# Sets up vertical bar chart
chart1 = alt.Chart(test).mark_bar().encode(
    x = alt.X('group:N'),
    y = alt.Y('value1:Q')
).properties(height = 300, width = 300, title = "Testing Title 1")

# Sets up horizontal bar chart
chart2 = alt.Chart(test).mark_bar().encode(
    x = alt.X('value2:Q'),
    y = alt.Y('group:N')
).properties(height = 300, width = 300, title = "Testing Title 2")

# Shows bar charts side by side
alt.hconcat(chart1, chart2)

图表标题对不齐。 (由于我显然需要10个声望点才能发布图片,因此无法发布图片。)
1个回答

3
似乎这种行为是由于在最左边的图表中自动避开y轴上方的顶部刻度及其标签“6”所致。Altair/Vega Lite可能会自动调整标题偏移量以适应图表中最高的元素,由于刻度及其标签位于轴线上方,因此与最右侧轴线相比,标题将垂直偏移,其中最上面的刻度及其标签“a”远低于轴线末端。
通过隐藏刻度标签,您可以看到这确实是问题所在。
当前外观(为了比较添加了红线): enter image description here 去除刻度标签后: enter image description here 不完全对齐,同时隐藏刻度可以使它们完美对齐。

去掉勾号和标签后: 输入图像描述

要解决这个问题,您可以手动设置两个标题的偏移量相同。不幸的是,使用.configure_title(offset=0)在布局上同时设置两个标题不起作用,因为它会向已用于自动避让的值添加偏移量。

相反,我认为您必须使用alt.TitleParams(offset=0)为最左边的图设置偏移量,或者为右侧的图设置一个值,使其与最左边的图高度相同。在这种情况下,“9”似乎是神奇数字

对于右侧的图,使用title = alt.TitleParams("Testing Title 2", offset=9) 输入图像描述

这可能是Vegalite的问题/特性,而不是Altair的问题,因此在问题跟踪器中查找或发布新问题以要求默认对齐可能会有所帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接