重新绘制条形图之间的间隙问题 [英] Recharts issue with gaps between Bars

问题描述

我正在使用 Recharts 库中的 BarChart，但是我在添加条形之间的空间时遇到了这个问题.我尝试使用属性 barGap={20} barCategoryGap={20}，但它似乎不起作用.

I am using BarChart from the Recharts library, however I am facing the issue while adding the space between bars. I have tried to use the attribute barGap={20} barCategoryGap={20}, however it doesn't seem to be working.

  <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>

推荐答案

它对您不起作用，因为您在 中指定了 barSize.

It doesn't work for you because you specified barSize in your <Bar>.

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

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) 语法

If you remove barSize you will be able to change gap between your Bars with barCategoryGap property. Either with this barCategoryGap="10%"(percents) or this barCategoryGap={10}(pixels) syntax

JSFiddle

这篇关于重新绘制条形图之间的间隙问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！