重新绘制条形图之间的间隙问题

问题描述

我正在使用 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 和条形组的数量计算.

如果您删除 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

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