我无法使用 recharts 库获取目标图形
I can't get target graphic with recharts library
我来这里是因为我正在尝试使用 recharts 库构建图表,但在多次尝试获得所需结果后,我仍然没有得到它。
我的目标图形应该与此类似:
我尝试了很多不同的东西,比如条形图、堆积条形图、组合图、误差线等,但我无法得到我想要的结果。
到目前为止我得到的最接近的结果是:
但此刻我尝试将黑色条与橙色条对齐(使用 stackId 道具),我得到了这个:
有人知道我是否可以使用这个库获得我想要的图形吗?任何帮助将不胜感激。
第二张图的代码是这样的:
const customData = [
{ name: 'food', uv: 1000, pv: [1001,2000], amt: 4500, time: 1, uvError: [100, 50], pvError: [110, 20] },
{ name: 'cosmetic', uv: 2300, pv: [2301,3700], amt: 6500, time: 2, uvError: 120, pvError: 50 },
{ name: 'storage', uv: 2200, pv: [2201,3500], amt: 5000, time: 3, uvError: [120, 80], pvError: [200, 100] },
{ name: 'digital', uv: 1800, pv: [1801,3300], amt: 4000, time: 4, uvError: 100, pvError: 30 },
];
class POC extends React.Component {
render() {
return (
<div className="bar-chart-wrapper">
<ComposedChart width={400} height={400} data={customData}>
<XAxis />
<YAxis />
<Bar dataKey="uv" fill="#ff7300">
<ErrorBar dataKey="pvError" width={5} strokeWidth={10} stroke="green" direction="y" />
</Bar>
<Bar dataKey="pv">
</Bar>
</ComposedChart>
</div>
);
}
}
第三个图形的代码是相同的,但我将属性 stackId="0" 添加到两个条形图。
提前感谢任何可以帮助我的人。
最后我自己找到了解决办法。
我在网上搜索 this Rechart's issue which linked me to this other one。我在那里找到了一个 jsfiddle 演示,使用该代码和一些更改我得到了我想要的结果。
这是最终结果:
这是代码:
const data = [
{ name: 'food', uv: 2000, pv: 1600, amt: 4500, time: 1, uvError: [100, 50], pvError: [110, 20] },
{ name: 'cosmetic', uv: 3300, pv: 2000, amt: 6500, time: 2, uvError: 120, pvError: 50 },
{ name: 'storage', uv: 3200, pv: 1398, amt: 5000, time: 3, uvError: [120, 80], pvError: [200, 100] },
{ name: 'digital', uv: 2800, pv: 2400, amt: 4000, time: 4, uvError: 100, pvError: 30 },
];
class POC extends React.Component {
render() {
return (
<div className="bar-chart-wrapper">
<BarChart width={600} height={300} data={data} margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis xAxisId={0} />
<XAxis xAxisId={1} hide/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Bar dataKey="uv" xAxisId={1} fill="#000" />
<Bar dataKey="pv" xAxisId={0} fill="#ff7300">
<ErrorBar dataKey="pvError" width={5} strokeWidth={10} stroke="green" />
</Bar>
</BarChart>
</div>
);
}
}
我希望这对其他人也有帮助。
谢谢!
我来这里是因为我正在尝试使用 recharts 库构建图表,但在多次尝试获得所需结果后,我仍然没有得到它。
我的目标图形应该与此类似:
我尝试了很多不同的东西,比如条形图、堆积条形图、组合图、误差线等,但我无法得到我想要的结果。
到目前为止我得到的最接近的结果是:
但此刻我尝试将黑色条与橙色条对齐(使用 stackId 道具),我得到了这个:
有人知道我是否可以使用这个库获得我想要的图形吗?任何帮助将不胜感激。
第二张图的代码是这样的:
const customData = [
{ name: 'food', uv: 1000, pv: [1001,2000], amt: 4500, time: 1, uvError: [100, 50], pvError: [110, 20] },
{ name: 'cosmetic', uv: 2300, pv: [2301,3700], amt: 6500, time: 2, uvError: 120, pvError: 50 },
{ name: 'storage', uv: 2200, pv: [2201,3500], amt: 5000, time: 3, uvError: [120, 80], pvError: [200, 100] },
{ name: 'digital', uv: 1800, pv: [1801,3300], amt: 4000, time: 4, uvError: 100, pvError: 30 },
];
class POC extends React.Component {
render() {
return (
<div className="bar-chart-wrapper">
<ComposedChart width={400} height={400} data={customData}>
<XAxis />
<YAxis />
<Bar dataKey="uv" fill="#ff7300">
<ErrorBar dataKey="pvError" width={5} strokeWidth={10} stroke="green" direction="y" />
</Bar>
<Bar dataKey="pv">
</Bar>
</ComposedChart>
</div>
);
}
}
第三个图形的代码是相同的,但我将属性 stackId="0" 添加到两个条形图。
提前感谢任何可以帮助我的人。
最后我自己找到了解决办法。
我在网上搜索 this Rechart's issue which linked me to this other one。我在那里找到了一个 jsfiddle 演示,使用该代码和一些更改我得到了我想要的结果。
这是最终结果:
这是代码:
const data = [
{ name: 'food', uv: 2000, pv: 1600, amt: 4500, time: 1, uvError: [100, 50], pvError: [110, 20] },
{ name: 'cosmetic', uv: 3300, pv: 2000, amt: 6500, time: 2, uvError: 120, pvError: 50 },
{ name: 'storage', uv: 3200, pv: 1398, amt: 5000, time: 3, uvError: [120, 80], pvError: [200, 100] },
{ name: 'digital', uv: 2800, pv: 2400, amt: 4000, time: 4, uvError: 100, pvError: 30 },
];
class POC extends React.Component {
render() {
return (
<div className="bar-chart-wrapper">
<BarChart width={600} height={300} data={data} margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis xAxisId={0} />
<XAxis xAxisId={1} hide/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Bar dataKey="uv" xAxisId={1} fill="#000" />
<Bar dataKey="pv" xAxisId={0} fill="#ff7300">
<ErrorBar dataKey="pvError" width={5} strokeWidth={10} stroke="green" />
</Bar>
</BarChart>
</div>
);
}
}
我希望这对其他人也有帮助。
谢谢!