问题描述
ReCharts在条形图中绘制3次条形时遇到问题。
为什么会发生这种情况,专家对此有什么特别的认识?
非常感谢您提供的任何帮助。
相关代码:
import React from 'react';
import { BarChart,Bar,XAxis,YAxis,ResponsiveContainer } from 'recharts';
import { GanttProps } from '../../models/Gantt';
const Gantt = ({ data,minX,maxX }: GanttProps): JSX.Element => {
const data3 = [
{
color: 'green',x0: 1602833700,x1: 1603427700,y: 'status'
},{
color: 'yellow',x0: 1603427700,x1: 1604427700,{
color: 'red',x0: 1604427700,x1: 1605427700,y: 'status'
}
];
const getDuration = (data) => {
return data.x1 - data.x0;
};
const getDivider = () => {
// return (maxX - minX) * 0.01;
return maxX - minX;
};
const getBars = (data) => {
const bars = [];
data3.forEach((object,index,array) => {
bars.push(<Bar dataKey={getDuration} stackId="a" fill={object.color} radius={2} key={`data.${index}`} />);
if (array.length > index + 1) {
console.log('making dividers');
bars.push(<Bar dataKey={getDivider} stackId="a" fill="blue" radius={2} key={`divider.${index}`} />);
}
});
console.log(bars);
return bars;
};
return (
<ResponsiveContainer width="100%" height="100%">
<BarChart data={data3} layout="vertical" margin={{ top: 0,right: 0,left: 0,bottom: 0 }}>
<XAxis type="number" hide={true} />
<YAxis type="category" hide={true} domain={[minX,maxX]} />
{getBars(data)}
</BarChart>
</ResponsiveContainer>
);
};
export default Gantt;
截屏:
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)