RECHARTS在将数据应用到我的图表时遇到麻烦

Question

我有来自API的多个数据数组，我需要将数组的[1]应用于行，[0]应用于图表的轴

数据集

31) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
0: (2) [1631491200000, 83567686530.87027]
1: (2) [1631577600000, 77370641706.12778]
2: (2) [1631664000000, 76881051804.16806]
3: (2) [1631750400000, 79647419225.17595]
4: (2) [1631836800000, 77800286104.44485]
5: (2) [1631923200000, 75633602743.40773]
6: (2) [1632009600000, 75942505891.08444]
7: (2) [1632096000000, 73534559243.04233]
8: (2) [1632182400000, 66467363740.22289]
9: (2) [1632268800000, 63007572370.16917]
10: (2) [1632355200000, 71610128886.36876]
11: (2) [1632441600000, 74492626868.77536]
12: (2) [1632528000000, 74002539819.03792]
13: (2) [1632614400000, 74201342932.3685]
14: (2) [1632700800000, 72357770423.4004]
15: (2) [1632787200000, 68586122051.51538]
16: (2) [1632873600000, 65557023880.654594]
17: (2) [1632960000000, 65835114804.1442]
18: (2) [1633046400000, 67871265795.13519]

我的尝试。map，它崩溃了我的网站。我想也许我需要在market_cap[1]中创建一个for循环在这几行

<LineChart
margin={{ right: 70 }}
width={420}
height={170}
data={marketcap}
>
<Line
dataKey={marketcap[1]}
type="monotone"
stroke=" #10b981"
activeDot={{ r: 8 }}
/>

Answer 1

recharts的数据格式是一个对象数组，示例来自文档:

[
{
"name": "Page A",
"uv": 4000,
"pv": 2400,
"amt": 2400
},
...
]

所以你应该这样做:

const marketcap = yourData.map(item=>({x: item[0], line: item[1]}))
...

<LineChart
margin={{ right: 70 }}
width={420}
height={170}
data={marketcap}
>
<Line
dataKey="line"
type="monotone"
stroke=" #10b981"
activeDot={{ r: 8 }}
/>
<XAxis dataKey="x" />
</LineChart>