如何在 Recharts 条形图中的条之间添加间隙（垂直，堆叠）答案

【问题标题】：How can I add a gap between the bars in Recharts Bar chart (vertical, stacked)如何在 Recharts 条形图中的条之间添加间隙（垂直，堆叠）
【发布时间】：2021-01-12 17:34:52
【问题描述】：

我正在尝试设置 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>;

【问题讨论】：

barCategoryGap 可能会解决您的问题
不幸的是它没有解决我的问题。所有显示的条形属性都不会对图表产生任何影响。

标签： reactjs bar-chart stacked-chart recharts

【解决方案1】：

我可以通过添加
style={{ stroke: '#fff', strokeWidth: 2 }} 到<BarChart>：

<BarChart
  layout="vertical"
  data={barChartData}
  height={300}
  barSize={24}
  barCategoryGap={16}
  style={{ stroke: '#fff', strokeWidth: 2 }}
>

如果您要添加空的<Bar /> 数据来实现这一点，一旦您开始在图表上使用工具提示，您可能会遇到一些奇怪的情况。

【讨论】：

【解决方案2】：

要在条之间添加间隙，您可以添加另一个 Bar 组件，该组件将具有固定值，filled 具有透明颜色，这样您就可以在两个条之间产生间隙的错觉堆积条形。

但是，要获得间隙值，您需要事先更新 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, gap: 100 },
  { name: 'Page C', uv: 2000, pv: 9800, amt: 2290, gap: 100 },
  { name: 'Page D', uv: 2780, pv: 3908, amt: 2000, gap: 100 },
  { name: 'Page E', uv: 1890, pv: 4800, amt: 2181, gap: 100 },
  { name: 'Page F', uv: 2390, pv: 3800, amt: 2500, gap: 100 },
  { name: 'Page G', uv: 3490, pv: 4300, amt: 2100, gap: 100 },
];

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>
    );
  }
}

【讨论】：