Reacharts：我需要帮助从json对象获取数据

Question

我正在使用React Recharts进行可视化，但是，在显示具有不同对应对象内容的折线图时遇到了挑战。我有const getTurnPosition = (userId: number): number => { return data.getTurnsForUser.map(turn => { const unfulfilledTurns = turn.store.turns.filter( (t) => t.fulfilled === false ); return unfulfilledTurns.findIndex((t) => t.user.id === userId); }); }; 对象，我希望有几个月的预订时间作为我的XAxis，而有year_payment的总数作为我的YAx。理想情况下，下图是我要如何显示数据的表示。我需要显示几个月而不是一周。谢谢

Answer 1

Ciao，首先，您必须操纵subscriptions数组： 假设您要在XAxis中显示date_purchased的月份。因此，您可以这样做：

subscriptions_manipulated = subscriptions.map(el => {
  el.date_purchased = new Date(el.date_purchased).getMonth() + 1 // + 1 because for January getMonth returns 0...
  return el;
});

然后您可以制作图形：

<LineChart data={subscriptions_manipulated}>
       <CartesianGrid strokeDasharray="3 3" />
       <XAxis dataKey="date_purchased" interval="preserveStartEnd" />
       <YAxis />
       <Tooltip/>
       <Legend />
       <Line name="annual_payment" type='monotone' dataKey='annual_payment' />
</LineChart>