如何解决如何在重新图表中的条形图中添加两个条形相同的 stackId之间的间隙
我不明白如何在两个 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>
);
}
}
截图:
解决方法
为了让 Bars 之间有更大的间隙,您可以使用 barCategoryGap
,在其中指定两个 Bars 之间需要多少 px 的间隙。但是,使用此属性也会使您的条形更细。要让 Bars 看起来更宽,您只需将 width
的 BarChart
更改为更大的值。
最后,你可以有类似的东西:
<BarChart
width={600}
barCategoryGap={15}
height={300}
[...]
结果如下:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。