在 recharts 线图中显示带有日期和时间的数据集

Question

我正在使用 recharts 中的折线图来显示随时间变化的值。

折线图代码如下所示。

export default function LineGraphs({ Data }) {
  
  return (
    <div>
      <h4>A demo of synchronized AreaCharts</h4>
      <LineChart
        width={500}
        height={100}
        data={data}
        syncId="anyId"
        margin={{
          top: 10,
          right: 30,
          left: 0,
          bottom: 0
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="Magic" stroke="#8884d8" fill="#8884d8" />
      </LineChart>
     
    </div>
  );
}

我想在折线图中显示这个数据集，它有日期，然后是魔法值的时间戳，即

{2020-10-05: Array(5), 2020-10-07: Array(4), 2020-10-09: Array(3), 2020-05-21: Array(3), 2020-05-22: Array(98), …}
2020-05-21: (3) [{…}, {…}, {…}]
2020-05-22: (98) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
2020-05-24: (12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
2020-06-04: (65) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
2020-06-05: (6) [{…}, {…}, {…}, {…}, {…}, {…}]

日期下的数组内部是，

0: {created: 1601820360, magic: -0.1, magnitude: 0.1, createdDay: "2020-10-05"}
1: {created: 1601820365, magic: -0.8, magnitude: 0.8, createdDay: "2020-10-05"}
2: {created: 1601900938, magic: -0.2, magnitude: 0.2, createdDay: "2020-10-05"}
3: {created: 1601900956, magic: -0.2, magnitude: 0.2, createdDay: "2020-10-05"}
4: {created: 1601900971, magic: 0.2, magnitude: 0.2, createdDay: "2020-10-05"}

目前我正在使用它来检查那里有什么数据，

Object.keys(Data).map(function(key, item) {
        console.log(Data[key]);
        
      })

我正在尝试了解如何最好地将此数据放入此图中 - 从总数据集开始，然后我将过滤应用程序中的日期。当我尝试执行上述代码时，我正在努力将其置于正确的格式以使其正确显示

Answer 1

我很确定在 recharts 中，您的数据集应该始终是一个数据点对象数组。您通常不应具有嵌套对象。如果您确实想要，那么您将需要将 getter 函数而不是字符串传递到 dataKey 属性中。文档确实表明这是一个选项：https://recharts.org/en-US/api/Line

就 X 轴和 Y 轴的 dataKey 而言，您将需要传递一个字符串或数字。因此，我建议将您传递到图表中的数据格式化为对象数组，每个对象代表一个数据点。

在 recharts 线图中显示带有日期和时间的数据集

Showing dataset with dates and times in recharts linechart

javascript

reactjs

recharts