如何解决从减速器获取响应数据并用于 Recharts 中的 LineChart 数据和 x 轴/y 轴/工具提示数据键和内容
目前我正在使用我的 react 应用程序中的图表制作 LineChart。我正在研究如何根据响应减速器获取响应数据以获取响应数据的状态 (mainApiResponseReducer)。我需要将它用作折线图中的数据,并设置 X 轴和 Y 轴数据键(X 轴基于 (fsc_WK_NBR - 1) 总共 3 年的销售数据(参考线表示当前当前年份的wk_nbr,以及当前年份-1、-2等wk_nbr的其他参考线。响应数据如下所示:
我正在寻找一种方法来设置每个响应数据的 x 轴和 y 轴数据键(见代码注释),以及使用 mainApiResponseReducer 的响应作为数据的折线图。下面是我现在的图表快照(只有虚拟数据将 x 轴显示为年份而不是每年之间的不同刻度):
我还有下面的代码,它使用了虚拟数据,还有我的另一个同事的代码,一个使用相同 mainApiResponseReducer 的不同组件:
const ForecastGraph = () => {
const classes=useStyles();
const [onclickSales,setonclickSales] = useState(true);
const [onclickB3,setonclickB2] = useState(true);
const [onclickB3,setonclickB3] = useState(true);
const handleSalesButton = () => {
setonclickSales(!onclickSales);
};
const handleB2Button = () => {
setonclickB2(!onclickB2);
};
const handleB3Button = () => {
setonclickB3(!onclickB3);
};
return (
<center>
{onclickSales &&
<button className={classes.buttonRed}
onClick={handleSalesButton} >Sales</button>
}
{!onclickSales &&
<button className={classes.buttonOff}
onClick={handleSalesButton} >Sales</button>
}
{/* {onclickB2 &&
<button className={classes.buttonGreen}
onClick={handleB2} >B2</button>
}
{!onclickB2 &&
<button className={classes.buttonOff}
onClick={handleB2} >B2</button>
}
{onclickB3 &&
<button className={classes.buttonBlue}
onClick={handleB3} >B3</button>
}
{!onclickB3 &&
<button className={classes.buttonOff}
onClick={handleB3} >B3</button>
} */}
<div className={styles.graphGrid}>
<ResponsiveContainer>
<LineChart
width={500}
height={300}
data={responseData}
margin={{
top: 5,right: 30,left: 20,bottom: 5
}}
>
<Cartesiangrid
vertical={false}
opacity="0.4"
/>
<XAxis
// need dataKey to be (fsc_WK_NBR - 1) and for all 3 years of data based on that same logic
// of (fsc_WK_NBR - 1) for each year prior to current year
tickCount={25}
/>
<YAxis
type="number"
//dataKey should be the sales_UNITS
tickCount={6}
axisLine={false}
tickLine={false}
padding={ {left: 30} }
/>
<Tooltip
// content={<CustomTooltip />}
isAnimationActive={false}
/>
{onclickSales &&
<Line type="monotone"
//data should be based on sales_UNITS for the given wk nbr of the year
stroke="#BE1710"
strokeWidth={2}
isAnimationActive={false}
dot={{r:0}}
/>
}
{/* {onclickB2 &&
<Line type="monotone"
stroke="#22766F"
strokeWidth={2}
isAnimationActive={false}
dot={{r:0}}
/>
} */}
{/* {onclickB3 &&
<Line type="monotone"
//dataKey="pv"
stroke="#0E65BC"
strokeWidth={2}
isAnimationActive={false}
dot={{r:0}}
/>
} */}
<ReferenceLine
// x = current fsc_WK_NBR of the current fsc_YR_NBR
stroke="black"
strokeWidth={1}
/>
<ReferenceLine
//x= (current fsc_WK_NBR -1) of (currentYear - 1)
strokeWidth={0.5}
/>
<ReferenceLine
//x= (current fsc_WK_NBR -1) of (currentYear - 2)
strokeWidth={0.5}
/>
<ReferenceLine
//x= (current fsc_WK_NBR -1) of (currentYear - 3)
strokeWidth={0.5}
/>
</LineChart>
</ResponsiveContainer>
</div>
</center>
);
};
export default ForecastGraph;
也是这个项目中的一个组件,来自其他人使用 mainApiResponseReducer 获取数据作为获取响应数据的参考(尽管我不确定如何将它用于我的折线图):
const dispatch = usedispatch();
const mainApiResponseReducer = useSelector(state => state.mainApiResponseReducer);
const responseData = mainApiResponseReducer.data;
// console.log("Response Data in table page = ",responseData[0]);
const currentWeek = mainApiResponseReducer.week;
const currentYear = mainApiResponseReducer.year;
const sales = mainApiResponseReducer.sales_UNITS;
// console.log("WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEK",currentWeek);
let arr = Array(6).fill().map(() => Array(52).fill());
// let arr;
responseData?
responseData.forEach((entry) => {
// console.log(entry);
switch(entry.fsc_YR_NBR){
case currentYear-3 :
arr[5][(entry.fsc_WK_NBR)-1] = entry.sales_UNITS
break;
case currentYear-2 :
arr[4][(entry.fsc_WK_NBR)-1] = entry.sales_UNITS
break;
case currentYear-1 :
arr[3][(entry.fsc_WK_NBR)-1] = entry.sales_UNITS
break;
case currentYear :
if(((entry.fsc_WK_NBR)-1) < currentWeek ) {
arr[2][(entry.fsc_WK_NBR)-1] = entry.sales_UNITS
}
break;
}
}):""
我是 React 世界的新手,所以我不确定如何使用 recharts 将这个响应和这个数据合并到我的折线图中,并适当地设置组件以使用数据。任何帮助或建议将不胜感激。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。