Question

我正在使用图表库中的 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>

Answer 1

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

每个条的宽度或高度。如果未指定barSize，则bar的大小将由barCategoryGap，barGap和钢筋组的数量来计算。

如果您删除barSize，则可以使用barCategoryGap属性更改各个条之间的间距。使用此barCategoryGap="10%"（百分比）或此barCategoryGap={10}（像素）语法

JSFiddle

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

1 个答案: