如何增加 altair 中的条间距

Question

我正在尝试创建一个交互式图表，例如当 select 进入一个类别时，它会显示该类别中的所有项目，但我还没有找到一种方法来说明较低的可变高度图表，这取决于每个类别中的项目数。这是图表的理想显示方式，当 selecting 类别 1:

当我 select 类别 2 时，我希望它是这样的：

但是，如果我指定一个固定的图表高度以适当的间距容纳类别 1 中的所有项目，这就是我在 select 类别 2 时得到的结果：

如果我不指定图表高度，条形会靠得太近，一些三角形不会显示：

代码如下：

df=pd.read_excel('df_test.xlsx')
    
    
domain=[df.Lowest.min(),df.Highest.max()]
    
    
selection=alt.selection_multi(fields=['category'],init=[{"category":"category1"}])
    
   
l=alt.Chart(df,height=80).mark_bar(color='red',size=15).encode(alt.X('min(Lowest)',scale=alt.Scale(domain=domain))
            ,alt.Y('category'),x2='max(middle)')
h=alt.Chart(df).mark_bar(color='green',size=15).encode(alt.X('max(middle)',scale=alt.Scale(domain=domain))
            ,alt.Y('category'),x2='max(Highest)')
avg_triangle=alt.Chart(df).mark_point(size=300,shape='triangle',filled=True,yOffset=-16,angle=180).encode(
    alt.X('mean(Current)',scale=alt.Scale(domain=domain)),alt.Y('category'))

averages=alt.layer(l,h,avg_triangle).add_selection(selection)


low=alt.Chart(df,height=300).mark_bar(color='red',size=15).encode(alt.X('Lowest',scale=alt.Scale(domain=domain))
                ,alt.Y('items'),x2='middle')

high=alt.Chart(df).mark_bar(color='green',size=15).encode(alt.X('middle',scale=alt.Scale(domain=domain))
                ,alt.Y('items'),x2='Highest')

triangle=alt.Chart(df).mark_point(size=300,shape='triangle',filled=True,yOffset=-16,angle=180).encode(
    alt.X('Current',scale=alt.Scale(domain=domain)),alt.Y('items'))
    
items=alt.layer(low,high,triangle).transform_filter(selection)
    

alt.vconcat(averages,items).configure_axis(title=' ')

这是数据集：

以及轻松抓取的数据：

df=pd.DataFrame([{'category': 'category1',
  'items': 'c1-item1',
  'Highest': 77.9674166,
  'Lowest': 64.76344086,
  'middle': 71.36542873,
  'Current': 70.11278195},
 {'category': 'category1',
  'items': 'c1-item2',
  'Highest': 85.71428571,
  'Lowest': 64.38053097,
  'middle': 75.04740834,
  'Current': 84.1},
 {'category': 'category1',
  'items': 'c1-item3',
  'Highest': 82.51879699,
  'Lowest': 62.63736264,
  'middle': 72.578079815,
  'Current': 81.2},
 {'category': 'category1',
  'items': 'c1-item4',
  'Highest': 80.47182176,
  'Lowest': 51.37362637,
  'middle': 65.922724065,
  'Current': 76.69172932},
 {'category': 'category1',
  'items': 'c1-item5',
  'Highest': 85.19003932,
  'Lowest': 55.43010753,
  'middle': 70.310073425,
  'Current': 83.64661654},
 {'category': 'category1',
  'items': 'c1-item6',
  'Highest': 79.45609436,
  'Lowest': 40.56776557,
  'middle': 60.01192996499999,
  'Current': 74.81203008},
 {'category': 'category2',
  'items': 'c2-item1',
  'Highest': 76.14678899,
  'Lowest': 50.0,
  'middle': 63.073394495,
  'Current': 69.17293233},
 {'category': 'category2',
  'items': 'c2-item2',
  'Highest': 81.06159895,
  'Lowest': 58.77956989,
  'middle': 69.92058442,
  'Current': 75.0}])

Answer 1

您可以 increase the number of pixels used for each nominal step (each bar) 使用 {"step": <number>}。您可以结合使用 bandPaddingInner:

import altair as alt
import pandas as pd

source = pd.DataFrame({
    'a': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
    'b': [28, 55, 43, 91, 81, 53, 19, 87, 52]
})

alt.Chart(source, width=alt.Step(100).mark_bar().encode(
    x='a',
    y='b'
).configure_scale(
    bandPaddingInner=0.5
)

您还需要 set .configure(autosize=alt.AutoSizeParams(resize=True)) at the end of your concatenated chart 以便根据选择更新整体图表大小（而不仅仅是坐标轴）。

在下一版本的 Altair 中，您将能够 dynamically change the height of a chart using parameters。

如何增加 altair 中的条间距

How to increase bar spacing in altair

python

altair