如何在 Recharts 条形图垂直、堆叠中的条形之间添加间隙

如何解决如何在 Recharts 条形图垂直、堆叠中的条形之间添加间隙

我正在尝试设置 Recharts 以显示垂直堆叠条形图，条形之间有一些间隙，但我无法设置任何间隙。

这就是我的代码的样子。

<ResponsiveContainer height={23} width={'100%'}>
  <BarChart
    data={data}
    layout={'vertical'}
    barGap={10}
    margin={{ top: 0,right: 0,bottom: 0,left: 0 }}
  >
    <XAxis type={'number'} hide domain={['dataMin','dataMax']} />
    <YAxis
      dataKey='axis'
      type={'category'}
      axisLine={false}
      tickLine={false}
      hide
    />
    {keys.map((key: string,index: number) => (
      <Bar key={key} stackId={'stack'} dataKey={key} fill={colors[key]} />
    ))}
  </BarChart>
</ResponsiveContainer>;

解决方法

要在条形之间添加间隙，您可以添加另一个 Bar 组件，该组件具有固定值，fill 带有透明颜色，以便您可以在条形之间产生间隙的错觉堆叠条中的两个条。

然而，要获得间隙值，您需要事先更新 data 数组，将 gap 值添加为其固定值（例如设置为 100）。

使用此解决方法，解决方案可能如下所示：

这是图像的相关代码：

import React,{ PureComponent } from 'react';
import { BarChart,Bar,XAxis,YAxis,CartesianGrid } from 'recharts';

const data = [
  /* Add the gap key to each data line; could also be done in a forloop */
  { name: 'Page A',uv: 4000,pv: 2400,amt: 2400,gap: 100 },{ name: 'Page B',uv: 3000,pv: 1398,amt: 2210,{ name: 'Page C',uv: 2000,pv: 9800,amt: 2290,{ name: 'Page D',uv: 2780,pv: 3908,amt: 2000,{ name: 'Page E',uv: 1890,pv: 4800,amt: 2181,{ name: 'Page F',uv: 2390,pv: 3800,amt: 2500,{ name: 'Page G',uv: 3490,pv: 4300,amt: 2100,];

const keys = ['uv','pv'];
const colors = ['#8884d8','#82ca9d'];

export default class Example extends PureComponent {
  render() {
    return (
      <BarChart
        width={500}
        height={300}
        data={data}
        margin={{ top: 20,right: 30,left: 20,bottom: 5 }}
        layout='vertical'
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis type='number' />
        <YAxis type='category' dataKey='name' />
        {keys.map((key: string,index: number): any => {
          const bars = [];
          bars.push(<Bar dataKey={key} stackId="a" fill={colors[index]} />);
          /* Add a bar just for the gap after each bar */
          bars.push(<Bar dataKey='gap' stackId="a" fill='transparent' />);
          return bars;
        })}
      </BarChart>
    );
  }
}