Recharts 问题与 Bars 之间的差距

Question

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

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

The width or height of each bar. If the barSize is not specified, the size of the bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.

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

JSFiddle

Recharts 问题与 Bars 之间的差距

Recharts issue with gaps between Bars

javascript

html

reactjs

react-redux

recharts