如何解决为什么ReCharts绘制3次条形图?
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 举报,一经查实,本站将立刻删除。