如何在图表的条形图中的每个分组条形之间获取内部填充或间隙？

如何解决如何在图表的条形图中的每个分组条形之间获取内部填充或间隙？

我正在尝试实现与Nivo Charts使用的内部填充类似的效果，但在图表中。

我有以下酒吧：

但是我想让它看起来更像这个（不是颜色，而是两个条之间的间隙）：

差异很小，但是两种颜色之间存在白色间隙。我该如何实现？

谢谢！

解决方法

我找不到任何填充解决方案，因此我找到了一种解决方法，即在两个现有条之间使用一个额外的条，并将其设置为给定的常量，颜色为“白色”。

我假设您使用了BarChart，所以这是它的外观：

const {BarChart,Bar,XAxis,YAxis,CartesianGrid,Tooltip,Legend} = Recharts;

// First,add the fake data ('blank' in this example)
// with a given constant (here,I chose 50)
const data = [
    {name: 'Page A',uv: 4000,pv: 2400,blank: 50,amt: 2400},[...]
];
const StackedBarChart = React.createClass({
    render () {
    return (
        <BarChart width={600} height={300} data={data} barGap={'70%'}
            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" />
       // Add a additional Bar containing the fake data,filled in white
       <Bar dataKey="blank" stackId="a" fill="#fff" />
       <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
      </BarChart>
    );
  }
})

ReactDOM.render(
  <StackedBarChart />,document.getElementById('container')
);

以下是查看最终结果的小提琴：https://jsfiddle.net/utvzxhfd/2/

这可能不是最优雅的解决方案，但它会输出所需的效果！