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

时间:2019-11-10 01:04:53

标签: python altair

使用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 个答案:

答案 0 :(得分:3)

此现象似乎是由于自动避开了顶部刻度线及其从最左侧图表的y轴开始的标签“ 6”而引起的。 Altair / Vega lite可能会自动将标题偏移量调整为图表中的最高元素,并且由于刻度线及其标签位于轴线上方,因此标题将相对于最右侧刻度线及其标签“ a”的最右轴垂直偏移“位于轴线的末端下方。

通过隐藏刻度线标签,您可以看到这确实是问题所在。

您的问题的当前出现情况(添加了红线用于比较): enter image description here

删除刻度标签后: 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)为最右边的图: enter image description here

这可能是Vegalite(而不是Altair)的问题/功能,因此深入研究问题跟踪器或发布新问题以要求默认情况下将它们对齐可能会有所帮助。