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

【问题标题】：Showing dataset with dates and times in recharts linechart在 recharts 折线图中显示带有日期和时间的数据集
【发布时间】：2021-08-30 13:56:15
【问题描述】：

我正在使用 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]);
        
      })

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

【问题讨论】：

你能准确说出你想要什么吗？

标签： javascript reactjs recharts

【解决方案1】：

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

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

【讨论】：