图表问题与酒吧之间的差距

Question

我使用BARCHART从Recharts库，但我面对的问题，同时增加酒吧之间的空间。我尝试使用属性barGap={20} barCategoryGap={20}，但是它似乎不起作用。

  <ResponsiveContainer width="100%" height={230}>
  <BarChart layout="vertical" width="100%" height={600} data={data} barGap={100} barCategoryGap={-20}
        margin={{top: 20, right: 20, bottom: 20, left: 20}}>
      <CartesianGrid stroke='#f5f5f5'/>
      <XAxis interval={0} type="number"/>
      <YAxis width={180} dx={-10} interval={0} dataKey="name" type="category"/>
      <Tooltip cursor={{fill: '#fff'}}/>
      <Legend/>

      <Bar dataKey='pv' barSize={18} fill='#f19135' radius={[0,20,20,0]} background={{fill: "#FFF"}}/>
   </BarChart>
   </ResponsiveContainer>

Answer 1

它对您不起作用，因为您barSize在<Bar>.

每个条形的宽度或高度。如果不指定 barSize，则条形的大小将由 barCategoryGap、barGap 和条形组的数量计算。

如果您删除，barSize您将能够更改您的酒吧与barCategoryGap财产之间的差距。使用此barCategoryGap="10%"（百分比）或此barCategoryGap={10}（像素）语法

JSFiddle