如何在重新图表中的条形图中添加两个条形（相同的 stackId）之间的间隙

Question

我不明白如何在两个 stackId 之间添加间隙。我试图添加一个额外的栏，我给了白色，这对于小值来说效果很好。有没有其他方法可以找到两个stackId之间的差距。

代码：

import React, { PureComponent } from 'react';
import BarChart from '@bit/recharts.recharts.bar-chart';
import Bar from '@bit/recharts.recharts.bar';
import XAxis from '@bit/recharts.recharts.x-axis';
import YAxis from '@bit/recharts.recharts.y-axis';
import CartesianGrid from '@bit/recharts.recharts.cartesian-grid';
import Tooltip from '@bit/recharts.recharts.tooltip';
import Legend from '@bit/recharts.recharts.legend';

const data = [
{
    name: 'Page A', uv: 4000, pv: 2400, amt: 2400,
},
{
    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,
},
];

export default class Example extends PureComponent {
render() {
    return (
        <BarChart
            width={500}
            height={300}
            data={data}
            margin={{
                top: 20, right: 30, left: 20, bottom: 5,
            }}
        >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Bar dataKey="pv" stackId="a" fill="#8884d8" />
            <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
        </BarChart>
    );
    }
    }

截图：

screenshot for bar graph

Answer 1

为了让 Bars 之间有更大的间隙，您可以使用 barCategoryGap，在其中指定两个 Bars 之间需要多少 px 的间隙。但是，使用此属性也会使您的条形更细。要让 Bars 看起来更宽，您只需将 width 的 BarChart 更改为更大的值。

最后，你可以有类似的东西：

<BarChart
  width={600}
  barCategoryGap={15}
  height={300}
[...]

结果如下：