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

问题描述

我正在尝试实现与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/

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