重新图表问题与酒吧之间的差距答案

【问题标题】：Recharts issue with gaps between Bars重新图表问题与酒吧之间的差距
【发布时间】：2019-03-18 06:18:58
【问题描述】：

我正在使用 Recharts 库中的 BarChart，但是在添加条形之间的空间时遇到了问题。我尝试使用属性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>

【问题讨论】：

能否附上整个代码 sn-p 以便我们重现问题？

标签： javascript html reactjs react-redux recharts

【解决方案1】：

这对您不起作用，因为您在 <Bar> 中指定了 barSize。

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

如果您删除 barSize，您将能够使用 barCategoryGap 属性更改条形之间的间隙。使用 barCategoryGap="10%"(percents) 或 barCategoryGap={10}(pixels) 语法

JSFiddle

【讨论】：