从减速器获取响应数据并用于 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 (将#修改为@）