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>

RECHARTS 无法将数据应用于我的图表

RECHARTS having trouble applying data to my chart

javascript

arrays

reactjs

next.js

recharts